Netscape 4 Element Margins

Home

About the space issue following (or preceding) an H tag - to get the results you want, it's important to understand the "margin collapsing" that browsers perform. H tags carry a default margin - as well as P tags and other elements.

When two elements with margins follow each other, the margin-top of the second element is not just added to the margin-bottom of the first one. Instead, the two margins are "collapsed", which leaves a gap only the size of larger of the two margins.

So, when an h1 tag, margin-bottom 18px, is followed by a P tag, margin-top 12px, the result is a space between them that is only 18px (the larger of the two margins), rather than 30px (12+18).

That's the way browsers are supposed to do it, and modern browsers do things that way.

If you need to support Netscape 4, however, this is one of it's most notorious flaws. The browser just will not give up the default margin for H tags, no matter what.

The answer is to use css to give the "following" paragraph a negative margin-top, instead of the 0. That moves the paragraph up into the H tags box and eliminates the gap. But it does mean separate style declarations - to support NN4, this is almost always a must anyway.

So, for well behaved browsers:

h1 {
margin-bottom:0em;
}
p.follow {
margin-top:0em;
}

and for Netscape 4:

h1 {
margin-bottom:0em;
}
p.follow {
margin-top:-1em;
}

Depending on other style declarations you may need to adjust the -1em. I often end up around -.8em

Hint: use either the @import rule or it's alternative to keep some styles seperate between N4 and better browsers.