HTML5 vs HTML4 - h1 tag rendered with extra space

I took a page whose DTD was HTML4 Transitional and changed the doctype to <!DOCTYPE html> and extra space appeared between the h1 and div beneath it. I didnt make ANY other changes to markup or CSS.

JSFiddle example: http://jsfiddle.net/ngordon/vSqkg/3/.

If you change the doctype from HTML5 to HTML4 Transitional, you can see the extra space appear and disappear even though the markup and CSS is exactly the same.

Any idea how to get rid of that space?

回答1:

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.

回答2:

Have you applied a CSS reset http://meyerweb.com/eric/tools/css/reset/ to your css before you start applying any other css effects?

回答3:

Your bug deals with default line height.

The HTML4 transitional is ignoring the contents of your H1 wrt line height, yielding a 25px tall element. The HTML5 is respecting the line-height of the H1 tag, which equates to 29px.

回答4:

just give the line-height:12px; or what you want.
TAKE A LOOK: JSFIDDLE. modification of your code.

回答5:

This is why the HTML5 Boilerplate has a CSS reset.

You can also just set the div to a margin: 0; padding: 0; but you are going to have to do for every element until you hit them all. The answer about the CSS reset by Meyer in this thread is correct.

Here is an example of the workaround: http://jsfiddle.net/mikelegacy/vSqkg/5/