Tag error: <txp:tru_tags_if_has_tags> ->  Textpattern Warning: tag does not exist while_parsing_page_form: archive, default
/commentable: Too Much Space Under H1 in CSS
Dinarius = digital interest
23 June 2008

Too Much Space Under H1 in CSS

Cascading Style Sheets are the lovely way to help design websites and no one has made a satisfactory answer-all book to help with the little details. In encountering a little problem with the H1 Header, I found the simple solution that controls the space above and below the Header text. Below is the code for the default appearance of a Header between two lines of regular text.

This is text above the Header div, H1.
<H1>Header Text</H1>
This is text below the Header div, H1.

There’s a great deal of space that is not adjusted by changing the line-height in styling the H1. So that space must be under the control of another Style. How about MARGINS? (HTML style below.)

This is text above the Header div, H1 with MARGIN reset.
<H1 style="margin:0px;">Header Text</H1>
This is text below the styled Header div, H1.

If you plug just that little bit of code into your HTML editor, you will see that the text above and below the Header Text in the second example dramatically close in to the Header Text since the default margin-top and margin-bottom for H1 is about 21px unless your blog CSS overrides that as ours does.

What LINE-HEIGHT will adjust is the space between two lines of Header Text. It will not adjust the space above and below the Header. When adjusting MARGIN in CSS, remember that doing it more completely is better. It’s not just margin:0px for all browsers. There are four attributes since there are FOUR sides. (CSS style below.)

H1 {
  margin-top: 3px;
  margin-right: 0px;
  margin-bottom: 3px;
  margin-left:  0px;
}

Starting at the top and moving clockwise around the sides is wise and advisable since that’s what the following code equates to in fewer characters:

H1 {
  margin: 3px 0;
}
Favorite's the ARTICLE, not the SITE.