Question

<!DOCTYPE html>
<html>
<body>
  <span style="font-size:48px">abc<br></span>
  <span style="font-size:6px">abc<br>abc</span>
</body>
</html>

只有当我使用HTML5 doctype时，IE9才会在行周边添加额外的边距。在font-size:0上添加line-height:0或 无效。

如何摆脱这些利润？

Answer 1

不同的浏览器处理方式不同，但我不确定什么是正确的方法。我的直觉是IE说得对，而Firefox却错了。（目前无法与其他浏览器联系，抱歉。）

跨度中的 使跨度两行变高，并且由于其字体大小为48px，因此后半部分的基线距离上半部分为48像素。这就是第二个跨度开始的地方;它继续在同一基线上。

如果您想避免这种情况，请不要将跨度与基线对齐，将它们对齐到顶部，方法是

<style>span {vertical-align:top}</style>

HTML中的

（在头部）。这样，第二个跨度中的文本将与行的顶部而不是基线齐平。

enter image description here

Answer 2

如果没有我自己测试你的问题，我会问你有没有尝试给予休息时的负面利润？ E.g。

<br style="margin-top:-3px" />

我不确定您使用 

时遇到问题的方式

但我的另一个问题是你为什么直接在身体中使用？根据你的例子我建议如下（尽管我仍然不知道你想要完成的是100％）：

<!DOCTYPE html>
<html>
<body>
    <h1>abc</h1>
    <p>abc</p>
    <p>abc</p>
</body>
</html>

然后在您的CSS中，您可以为<h1>和提供所需的字体大小，行高等。

h1 {
    font-size:48px;
    margin-bottom:0;
}

另外，font-size:6px;非常小，对任何人来说都很难读。有时某些浏览器或设备甚至不会渲染小的字体大小，而是自动将其呈现为font-size:10px;。我建议身体文本至少12px，最好还要大一点。