Question

我选择了一个DTD为HTML4 Transitional的页面，并将doctype更改为<!DOCTYPE html>，并在h1和div之间出现了额外的空格。我没有对标记或CSS进行任何其他更改。

JSFiddle示例：http://jsfiddle.net/ngordon/vSqkg/3/。

如果您将doctype从HTML5更改为HTML4 Transitional，即使标记和CSS完全相同，您也可以看到额外的空格出现并消失。

知道如何摆脱那个空间吗？

Answer 1

HTML 4.01 Transitional doctype在浏览器中导致Almost Standards模式。 HTML5 doctype导致标准模式。

这篇Microsoft文章解释了不同之处：http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29。

它表示对于几乎标准模式：

当且仅当其中一个元素时，内联元素对行高有贡献   以下是真的。

如果元素：



包含文字字符



具有非零边框宽度



有非零保证金



具有非零填充



有背景图片



将vertical-align设置为基线以外的值



请注意，换行符不会被视为文本字符   定义，除非它是行框的唯一内容。在这种情况下，   线框高度仍然是最上面的内嵌框顶部和   最下面的内联框底部就行了，不管指定的是什么   行高。

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

最重要的是，在你的情况下，这意味着包含图像的线的高度的计算不包括strut，这是一个假想的内联元素，应该将行高增加到行高值h1元素。

这个jsfiddle显示了一个真实的span元素，其中 作为支柱的真实文本内容，您可以看到HTML 4.01的布局是相同的过渡文档类型和HTML5文档类型。

这个jsfiddle显示了相同的想法，只是这次使用CSS制作了支柱，如下所示：

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

在khurram的回答中，他正在做的是减少h1的行高，因此，在标准模式下，支柱的高度要小于图像的高度。这意味着整个线的高度由图像的高度决定，而不是由支柱的高度决定。在标准和几乎标准模式下，图像的高度都是相同的，所以再次看，模式之间的渲染没有区别。

至于为什么设置h1的行高以匹配图像的高度（25px）不起作用，但设置为12px，这是因为strut不仅建立了top和a底部，但也是该线的基线。基线略高于底部以允许文本下降，对于正常大小的文本，通常约为3px。默认情况下，图像位于基线上，因此基线和底部之间的间隙会添加到图像的高度，以确定线条的高度。

这可以通过使用此jsfiddle中显示的img { vertical-align: top }将图像移出基线来解决。如果你在这里修改h1线高，你会发现大于25px的值会增加线之间的间距，但是25px或更小的值不会改变那个间距。

Answer 2

在开始应用任何其他css效果之前，您是否已将CSS重置http://meyerweb.com/eric/tools/css/reset/应用于css？

Answer 3

您的错误处理默认行高。

HTML4过渡忽略了H1 wrt行高的内容，产生了25px高的元素。 HTML5尊重H1标签的行高，相当于29px。

Answer 4

只需提供line-height:12px;或您想要的内容 看一看： JSFIDDLE。修改你的代码。

Answer 5

这就是HTML5 Boilerplate重置CSS的原因。

您也可以将div设置为margin: 0; padding: 0;，但在完成所有操作之前，您必须为每个元素执行此操作。关于Meyer在这个帖子中重置CSS的答案是正确的。

以下是变通方法的示例：http://jsfiddle.net/mikelegacy/vSqkg/5/

HTML5与HTML4 - 使用额外空间呈现的h1标记 - 如何删除？

5 个答案: