HTML5 Vs HTML4 - H1 Tag Rendered with Extra Space - How to Remove

HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

The HTML 4.01 Transitional doctype causes Almost Standards mode in browsers. The HTML5 doctype causes Standards mode.

This Microsoft article explains the difference: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29 .

It says that for Almost Standards mode:

Inline elements contribute to line height if and only if one of the
following is true.

If the element:

• Contains text characters

• Has a nonzero border width

• Has a nonzero margin

• Has a nonzero padding

• Has a background image

• Has vertical-align set to a value other than baseline

Note that a line break is not considered a text character for this
definition unless it is the only content of a line box. In that case,
the line box height remains the uppermost inline box top and the
lowermost inline box bottom on the line, regardless of the specified
line height.

If an img element is the sole content of a table cell, the line box
height of the cell line box height is adjusted to zero.

Most critically in your case, it means that the calculation of the height of the line containing the image doesn't include the strut, an imaginary inline element that should increase the line height to the line-height value of the h1 element.

This jsfiddle shows a real span element with an   as real text content standing in for the strut, and you can see that the layout is the same with both an HTML 4.01 Transitional doctype and an HTML5 doctype.

This jsfiddle shows the same idea, only this time the strut is fabricated using CSS, like this:

h1:before {
   content: '\A0';
}

In the case of khurram's answer, what he is doing is reducing the line-height of the h1 and hence, in standards mode, the height of the strut to be less than the height of the image. This means that the height of the line as a whole is determined by the height of the image, not the height of the strut. The height of the image is the same in both standards and almost standards mode so again, you don't see a difference in rendering between the modes.

As for why setting the line-height of the h1 to match the height of the image (25px) doesn't work but setting it to 12px does, that's because the strut establishes not only a top and a bottom, but also a baseline for the line. The baseline is a little above the bottom to allow for text descenders, for normal size text that's usually about 3px. The image by default sits on the baseline so the gap between the baseline and the bottom is added to the height of image to establish the height of the line.

This can be resolved by moving the image off the baseline, by using img { vertical-align: top }, which is shown in this jsfiddle. If you tinker with the h1 line-height here, you will see that values greater than 25px increase the spacing between the lines, but values of 25px or less do not change that spacing.

HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

The HTML 4.01 Transitional doctype causes Almost Standards mode in browsers. The HTML5 doctype causes Standards mode.

This Microsoft article explains the difference: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29 .

It says that for Almost Standards mode:

Inline elements contribute to line height if and only if one of the
following is true.

If the element:

• Contains text characters

• Has a nonzero border width

• Has a nonzero margin

• Has a nonzero padding

• Has a background image

• Has vertical-align set to a value other than baseline

Note that a line break is not considered a text character for this
definition unless it is the only content of a line box. In that case,
the line box height remains the uppermost inline box top and the
lowermost inline box bottom on the line, regardless of the specified
line height.

If an img element is the sole content of a table cell, the line box
height of the cell line box height is adjusted to zero.

Most critically in your case, it means that the calculation of the height of the line containing the image doesn't include the strut, an imaginary inline element that should increase the line height to the line-height value of the h1 element.

This jsfiddle shows a real span element with an   as real text content standing in for the strut, and you can see that the layout is the same with both an HTML 4.01 Transitional doctype and an HTML5 doctype.

This jsfiddle shows the same idea, only this time the strut is fabricated using CSS, like this:

h1:before {
   content: '\A0';
}

In the case of khurram's answer, what he is doing is reducing the line-height of the h1 and hence, in standards mode, the height of the strut to be less than the height of the image. This means that the height of the line as a whole is determined by the height of the image, not the height of the strut. The height of the image is the same in both standards and almost standards mode so again, you don't see a difference in rendering between the modes.

As for why setting the line-height of the h1 to match the height of the image (25px) doesn't work but setting it to 12px does, that's because the strut establishes not only a top and a bottom, but also a baseline for the line. The baseline is a little above the bottom to allow for text descenders, for normal size text that's usually about 3px. The image by default sits on the baseline so the gap between the baseline and the bottom is added to the height of image to establish the height of the line.

This can be resolved by moving the image off the baseline, by using img { vertical-align: top }, which is shown in this jsfiddle. If you tinker with the h1 line-height here, you will see that values greater than 25px increase the spacing between the lines, but values of 25px or less do not change that spacing.

Doctype line height issue

I think this has something to do with you putting the font size on the span which is an inline element. This is whee it gets tricky as I don't know what's going on when you do this but apparently when the inline element has a different font size than the container block element the line height gets affected. I did a couple of tests using jquery to alert the line height in FF with HTML5 doctype. The line height returns 17.xx when you set the font size of 11px on the span and it returns 13.xx if you set it on the p

If you put the font css in the paragraph tag, it will solve your problem

http://jsfiddle.net/ywu5107e/1/

p { 
    margin-top: 0;
    margin-bottom: 0; 
    font: 11px "Helvetica", "Helvetica", sans-serif; 
}

You can also have a read at HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove? the first answer is helpful

How to properly use h1 in HTML5

As I state in my comment and you quote in the W3C, h1 is a heading and not a title. Each sectioning element can have its own heading element(s). You cannot think of h1 as being the title of a page only but as the heading of that particular section of the page. Just like the front page of a newspaper, each article can have its own heading (or title).

Here is a good article on this.

DOCTYPE affects rendering of line-height

While writing this question and the related jsFiddle demo, I wound up doing some more digging and found out what's happening. Rather than scrap the question, I figured I may as well post it with this answer.

What I've gathered from inspecting the elements in Chrome after switching DOCTYPES is this:

• .btn has no height specified, only line-height: 18px and padding: 4px 10px
• in HTML5, the final height of the caret-only button is 18px, same as the defined line-height
• in a Transitional DOCTYPE, the height of the caret-only button is 11px, same as the outerHeight() of the caret (border-top + margin-top), but less than the line-height of the button.

So, I can only assume that Strict (and HTML5) DOCTYPEs enforce line-height as some kind of min-height; even if there is no text in the element, it applies line-height ... whereas Transitional DOCTYPES do not.

When I add some text to the caret-only button (  for example), then line-height kicks in on Transitional DOCTYPEs and the button renders at the full height.

Why does HTML require that multiple spaces show up as a single space in the browser?

Spaces are compacted in HTML because there's a distinction between how HTML is formatted and how it should be rendered. Consider a page like this:

<html>
    <body>
        <a href="mylink">A link</a>
    </body>
</html>

If the HTML was indented using spaces for example, the link would be preceded by several spaces.

Tab space instead of multiple non-breaking spaces (nbsp)?

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

Which doctype should I use?

Everything I've read lately seems to say that you should just use a plain doctype so the browsers can use the latest rendering standards.

<!DOCTYPE HTML >

---

Related Topics