Content Margin Dilemma: Bottom Versus Top
Okay I got one for all you CSS gurus out there: should margins for content tags (e.g. H2, H3, P, UL) be placed at the bottom or at the top of the block?
Personally I use margin-top: 1em for these tags. I think it makes sens to place margins at the top simply because the margin does not “exist” unless that block is present. Though a bottom margin also does not get rendered unless there is a block beneath it.
What are your thoughts?
October 5th, 2007 at 2:27 am
margin-top can do bad things some cases, I prefer padding-top. I use margings only with divs (container, header, navigation, content, footer etc.)
October 5th, 2007 at 2:38 am
Personally, I base the decision on how I need the first block in my page to look.
If in my page the first block is an H1 block for which I don’t want a top margin, but for every subsequent occurence of the H1 block I would like a top margin, then I specify bottom margins for every block type in my page. That way, whatever element occurs just before the second H1 block will have a bottom margin which pushes the H1 block down giving it an effective top margin.
If on the other hand, I want my first H1 block itself to have a top margin, then I specify top margins for all block types in my page.
Not a very logical reason I guess, but sub-conciously, that’s how I choose between top/bottom margins for my blocks.
October 5th, 2007 at 6:51 am
Headings: top- and bottom-margin
Other block elements: bottom-margin
Why? Block elements need a vertical flow, and from my experience, it works best with bottom-margin. Headings CAN have a top-margin also because they need a bit more space to breathe…
October 6th, 2007 at 1:22 am
Aside from major layout structure, I use bottom margins especially for copy formatting and modular object. It’s really for peace of mind and debugging. I’ve experienced that the spacing if needed between a previous and next block element block should be determined by the former. If the heading is the first element such as page header, I would allow the container’s padding to determine the top space.
It’s really about one’s consistent practice.
October 8th, 2007 at 1:20 am
Tim: I like your argument, it makes a lot of sense to me.
The varied responses shows there are a lot of ways to get to the top of the mountain. I guess the main point here is consistency, as pointed out by dhk.
October 8th, 2007 at 4:38 am
GOOD Website! I like cssvault.com
Think you!