html删除h1元素吗,HTML5 vs HTML4 - 带额外空间的h1标签 - 如何删除？

的HTML 4.01过渡DOCTYPE导致几乎标准的浏览器中的模式。 HTML5文档类型导致标准模式。

它说，对于准标准模式：

内联元素有助于行高当且仅当跟随 之一是真实的。

如果元素：

包含文本字符

具有非零边框宽度

具有非零保证金

具有非零填充

有一个背景图像

先后垂直对齐设置为一个换行符不考虑这个 定义的文本字符，除非它是唯一的含量比基线

注意以外的值一个线框。在这种情况下，无论指定的 行高度如何，行箱高度仍然是行上最上面的行内箱顶部和最下面的行内箱底部。

如果img元素是表格单元格的唯一内容，则将单元格线框高度的线框 调整为零。

最关键的你的情况，这意味着包含该图像的行的高度的计算不包括strut，一个假想的内联元件应当增加线路高度的行高值h1元素。

这jsfiddle显示了一个 作为真正的文本内容站在为支柱真正span元素，你可以看到布局既与HTML 4.01的doctype过渡和HTML5文档类型相同。

这jsfiddle显示了同样的想法，只是这一次的支柱用CSS制作，像这样：

h1:before {

content: '\A0';

}

在khurram的回答的情况下，他在做什么是减少的行高h1，因此，在标准模式下，支柱的高度应小于图像的高度。这意味着整条线的高度取决于图像的高度，而不是支柱的高度。图像的高度在标准和几乎标准模式下都是相同的，因此您再也不会在模式之间呈现差异。

至于为什么将h1的行高设置为与图像的高度(25px)相匹配不起作用，但将其设置为12px，这是因为支撑不仅建立了顶部和底部，而且也是该线的基线。基线稍微高于底部以允许文本下移，对于正常大小的文本通常大约为3px。默认情况下，图像位于基线上，因此基线和底部之间的间距被添加到图像的高度以确定线条的高度。

这可以通过移动图像断基准，通过使用img { vertical-align: top }，这是在此jsfiddle所示来解决。如果你在这里修改h1行高，你会看到大于25px的值增加了行之间的间距，但是25px或更小的值不会改变该间距。