Question

以下div中有额外的顶部填充：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Extra Top Padding</title>
    <style>
        div {
            background: tan;
        }
        div * {
            vertical-align: middle;
        }
        span {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="https://ssl.gstatic.com/images/icons/gplus-16.png"><span>Some text</span>
    </div>
    <p id="indicator"></p>
    <script>
        document.getElementById('indicator').textContent = document.getElementById('container').clientHeight;
    </script>
</body>

</html>

DEMO

如果您使用HTML 4.01 Transitional doctype：

，则会正确显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这是HTML5中的错误吗？

Answer 1

TL;博士

这不是错误。它遵循为您的文档使用几乎标准模式或标准模式的结果。并且它不是填充，它是行高空间。

就个人而言，我不满足于上述解释。但要完全解释需要大量细节。所以这里：

计算适用于Times New Roman字体。尽管原则保持不变，但其他字体可能会给出不同的值。

有或没有img元素的高度差是相同的，所以让我们放弃它。

当您使用HTML5 doctype（或HTML 4.01 Strict doctype）时，您将获得标准模式。当您使用HTML 4.01 Transitional doctype时，您将获得Almost Standards模式。两种模式之间的差异主要在于哪些内联框影响线高。特别是，strut对于几乎标准模式没有影响。

因此，在几乎标准模式中，唯一的内联框是文本。 div的总高度就是该文本的行高。这是16px * 1.25（div的行高设置）= 20px。

标准模式更复杂。现在我们有文本和支柱。支柱与基线对齐。 1.25的默认行高为我们提供2px上半部分，比基线高出+ 13px上升，3px下行+ 2px下半部分领先。总计20px。

文字是vertical-align：middle。 CSS 2.1规范说明了

将框的垂直中点与父级的基线对齐框加上父母的x高度的一半。

父框的基线是支柱的基线，我们从上面知道的是底部上方5px（在添加文本之前）。

字体大小为16px的字体x高度约为7px。减半并截断为整数给出3px。将其添加到5px，我们得到底部上方8px文本的对齐线。

盒子的垂直中点在对齐线上方10px，在对齐线下方10px。

线高必须足够大以包含其所有内联框，这意味着它必须是对齐线上方的最大框+对齐线下方的框的最大值。这是线上方的最大值（12px [strut]，10px [text]）和线下方的最大值（8px [strut]，10px [text]）。

等于（12px + 10px）或22px。

Answer 2

不，这不是一个错误，这是所谓的浏览器默认样式表，如果你使用重置库，你将摆脱它，检查这个修改后的fiddle：http://jsfiddle.net/nightire/gaab7/2/

与这两张图片比较：

enter image description here

和

enter image description here

告诉我@jukkaK.Korpela，你的相同代码＆amp;同样的现象？

我将粘贴另一张图片，显示如何在没有任何第三方重置库的情况下解决您的问题。似乎@jukkaK.Korpela的浏览器没有呈现正确的结果，所以请检查并检查并尝试找另一台计算机进行验证。

enter image description here

Answer 3

这不是 bug ，而是用户代理/浏览器的默认样式。每个浏览器（或实际的浏览器系列）都有不同的默认值。我建议使用normalize.css来解决这类问题

normalize.css：http://necolas.github.io/normalize.css/

使用HTML5 doctype时，容器中有额外的顶部填充

3 个答案: