Snuggly headers

[francis]

As it's a bank holiday weekend, I decided to set myself a project and rebuild an online magazine from work in CSS. It's taken a few hours and I've encountered some IE bugs that I've not had to work around before, but it's looking pretty good (although I've yet to see it in IE5) and I've learnt quite a bit. I've also got the file size down from 124k down to 37k with an additional 2.7k of stylesheet.

I was looking for a way to reduce the margins around <Hn> and a following

tag, so there was a suitable top margin to give some space, but the bottom of the <Hn> tag rested nicely just above the

. I wanted to achive this without adding extra classes bloat to everything in sight. I sneaked a look at the source code for Zeldman's site (http://www.zeldman.com/) and noticed he had managed it. Having a look at his stylesheet gave the answer: remove the top margin on the

tag and the bottom margin on the required <Hn> tag. Something like this:

p{
margin: 0 0 1em;
}

h3{
margin-bottom:0;
}

And that's it - your <h3> tag will now sit nicely just above your text, but there will still be a nice amount of white space above it to make it look like a heading.

Notes for the p tag styling for those that might need them: when three options are given on something like margin, it works like this:

top, left+right combined, bottom

What we've done here is to remove the top margin from all

tags but to slightly increase the bottom one to compensate - this way there's still a nice amount of space between paragraphs. Note: if specifying a zero width, no unit of measurement is needed (although you can put one if you want).

Old <h3> tag with following

:
http://www.websitearchitecture.co.uk/storr/forumimgs/phnmarginsold.gif

New, improved <h3> tag with following

:
http://www.websitearchitecture.co.uk/storr/forumimgs/phnmarginsnew.gif

This is a pretty good workaround to compensate for IE's lack of support for adjacent sibling selectors.