我选择了一个 DTD 为 HTML4 Transitional 的页面，并将 doctype 更改为 <!DOCTYPE html>，并且在其下方的 h1 和 div 之间出现了额外的空间。我没有对标记或 CSS 进行任何其他更改。
JSFiddle 示例：http://jsfiddle.net/ngordon/vSqkg/3/.
如果您将 doctype 从 HTML5 更改为 HTML4 Transitional，即使标记和 CSS 完全相同，您也会看到多余的空格出现和消失。
知道如何摆脱那个空间吗？
【问题讨论】：
您的错误处理默认行高。
HTML4 过渡忽略 H1 wrt 行高的内容，产生一个 25px 高的元素。 HTML5 尊重 H1 标签的行高，相当于 29 像素。
【讨论】：
HTML 4.01 过渡文档类型在浏览器中导致几乎标准模式。 HTML5 文档类型导致标准模式。
这篇 Microsoft 文章解释了不同之处：http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29。
它说对于几乎标准模式：
内联元素对行高有贡献当且仅当 以下是正确的。
如果元素：
包含文本字符
具有非零边框宽度
具有非零边距
具有非零填充
有背景图片
已将垂直对齐设置为基线以外的值
请注意，换行符不被视为文本字符 定义，除非它是行框的唯一内容。在这种情况下， 行框高度仍然是最上面的行内框顶部和 最下方的行内框底部就行，不管指定 行高。
如果 img 元素是表格单元格的唯一内容，则行框 单元格线框高度的高度调整为零。
在您的情况下最关键的是，这意味着计算包含图像的行的高度不包括 strut，这是一个虚构的内联元素，应该将行高增加到h1 元素。
这个jsfiddle 显示了一个真实的span 元素和一个&nbsp; 作为代表支柱的真实文本内容，您可以看到HTML 4.01 过渡文档类型和HTML5 文档类型的布局是相同的.
这个jsfiddle 显示了相同的想法，只是这次使用 CSS 制作了支柱，如下所示：
h1:before {
content: '\A0';
}
在 khurram 的回答中，他正在做的是减少 h1 的行高，因此，在标准模式下，支柱的高度小于图像的高度。这意味着整个线条的高度是由图像的高度决定的，而不是支柱的高度。在标准模式和几乎标准模式下，图像的高度是相同的，因此，您不会看到两种模式之间的渲染差异。
至于为什么设置h1的行高以匹配图像的高度（25px）不起作用但将其设置为12px，那是因为支柱不仅建立了顶部和底部，也是该行的基线。基线略高于底部以允许文本下降，正常大小的文本通常约为 3px。默认情况下，图像位于基线上，因此基线和底部之间的间隙被添加到图像的高度以建立线的高度。
这可以通过使用img { vertical-align: top } 将图像移出基线来解决，这在jsfiddle 中显示。如果您在此处修改 h1 行高，您会看到大于 25px 的值会增加行间距，但小于或等于 25px 的值不会改变该间距。
【讨论】：
这就是 HTML5 Boilerplate 重置 CSS 的原因。
您也可以只将 div 设置为 margin: 0; padding: 0;，但您必须对每个元素都执行此操作，直到将它们全部击中。 Meyer 在此线程中关于 CSS 重置的答案是正确的。
以下是解决方法的示例：http://jsfiddle.net/mikelegacy/vSqkg/5/
【讨论】：
只需提供line-height:12px; 或您想要的。
看看： JSFIDDLE。修改你的代码。
【讨论】：
在开始应用任何其他 css 效果之前，您是否对 css 应用了 CSS 重置 http://meyerweb.com/eric/tools/css/reset/？
【讨论】：