Controlling <h1> Tags

margin-bottom: -5px;

[pageoneresults]

I'm sure this has been covered before, but at the rate that posts move to thread heaven, I thought it might be a good topic to discuss.

How are most of you controlling the appearance of your <h1> tags? I've been using an external style sheet for years and control them like this...

h1, h2, h3, h4, h5, h6{
font-family:"verdana", arial, helvetica, sans-serif;
color:#226099;
font-size:15px;
text-align:left;
margin-top:0px;
margin-bottom:-5px;
background:none repeat;

The margin attributes are very important here as they control the space before and after the <h1> tag in most browsers (excludes NS4). I also found out through recent testing that you should have the margin-top and margin-bottom attributes in the style sheet set to at least 0px. Opera did not like my <h1> tags without the margin attributes, a little too much space above and below.

[mivox]

::shuffles feet abashedly::

Never got into using <h1> tags...

The few times I have though, I set basic CSS attributes for them, and grinned and bore the gap they left beneath the header text. Next site, I'll have to try your technique, because the spacing gets a bit too weird.

[tedster]

The spacing gaps are hard to control cross-browser because NN4 doesn't collapse margins properly between two boxes when they touch. You can get a nice look from NN4 if you browser sniff and give it a new css file (just one element to cascade in, not a biggie).

The approach I use is this:

1. h1, h2, h3, h4, h5, h6 {margin-bottom:0 em;}

2. A special class of P tag (p.follow) is created for the text that follows the H tag. p.follow {margin-top:0 em;} This works for most browsers

3. Sniff for NN4 and then cascade in a Netscape only style that gives p.follow a -1 em margin-top instead of the 0 em p.follow {margin-top:-1em;}

Now Netscape 4 will collapse the margins visually the same as the others.