HTML5与HTML4 - h1标记呈现额外的空间 - 如何移除？ [英] HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?
问题描述
我把一个页面的DTD为HTML4 Transitional并将doctype改为<！DOCTYPE html> ，并且在h1和下面的div之间出现了额外的空间。我没有对标记或CSS进行任何其他更改。
JSFiddle示例： http://jsfiddle.net/ngordon/vSqkg/3/ 。
如果将doctype从HTML5更改为HTML4 Transitional，您可以看到额外的空间出现和消失，即使标记和CSS是完全相同的。
任何想法如何摆脱那个空间？
此Microsoft文章解释了以下区别： http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29 。
它说几乎标准模式：
如果元素：
包含文字字符
有非零边框宽度
有非零的边距
有一个非零的边距背景图片
已将vertical-align设置为除基线以外的值
注意，换行符不会被认为是
定义的文本字符，除非它是行框的唯一内容。在这种情况下，
的行框高度仍然是最上面的行内框顶部和
最低的行内框下面的行，而不管指定的
行高。
如果img元素是表格单元格的唯一内容，则将单元格行框高度的行框
的高度调整为零。
< blockquote>
在最严重的情况下，这意味着计算包含图像的行的高度不包括
strut，一个假想的内联元素，应该将行高增加到line-height元素。h1
此 jsfiddle 显示了一个真实的
span元素与& nbsp;作为真正的文本内容站在strut，你可以看到布局是一样的HTML 4.01 Transitional doctype和HTML5 doctype。
此 jsfiddle 显示同样的想法，只有这时strut是使用CSS制造的，像这样：
h1：before {
content ：'\A0';
}
在khurram的答案的情况下，h1的高度，因此在标准模式下，支柱的高度小于图像的高度。这意味着线的高度作为一个整体由图像的高度，而不是支柱的高度决定。图像的高度在标准和几乎标准模式下是相同的，所以再次看不出模式之间的渲染有什么不同。
至于为什么设置匹配图像高度（25px）的
h1的行高不起作用，但将其设置为12px，这是因为strut不仅建立了顶部和底部，也是线的基线。基线稍微高于底部，以允许文本下降，正常大小的文本通常约为3px。默认情况下，图像位于基线上，因此将基线和底部之间的间隙添加到图像的高度以确定线的高度。
这可以是通过使用
img（vertical-align：top），将此图像移出基线来解决此问题，该问题显示在此 jsfiddle 。如果你在这里修改h1 line-height，你会看到大于25px的值增加了线之间的间距，但是25px或更小的值不会改变那个间距。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?
解决方案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 theh1element.This jsfiddle shows a real
spanelement 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
h1and 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
h1to 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与HTML4 - h1标记呈现额外的空间 - 如何移除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
