为什么HTML5 DOCTYPE会影响我的填充(padding)？

Question

我有一个带有导航栏的html5页面，完全是从头开始编写的。我最近向该项目添加了一个doctype声明，现在我的导航栏下面多出了一些空白。如果我删除doctype声明，它就会恢复正常。我已经在所有元素上完全重置了填充、边距等，并将代码减少到最少以说明问题。

该页面可在http://hackthetruth.org/webdesign/broken上查看。

是否有人知道为什么声明doctype会影响div的高度?

- Dakota

---

1. 你为什么没有使用文档类型声明就开始设计？
2. 我很想帮忙，但我正在使用FF，因此出现了“使用Webkit”的消息（似乎也缺少文档类型声明）。

- HorusKol

我现在已经将事情开放到Firefox，并向浏览器页面添加了一个文档类型。我仍然有这个问题，无法引用它。由于存在已知数量的额外空间，我已经为我的主站点打了一个负边距的补丁。我感兴趣的是如何解决这个问题。因为<ul>元素后面不应该有空格，所以这似乎是渲染引擎中的某种怪癖。 - Dakota

Answer 1

我有一个网站也遇到了同样的问题。我在这里找到了答案：这里：

"使用HTML5 doctype时，图像会接收与文本通常获得的行高属性相同的属性，因此它们在下方会产生“边距”。你可以将它们设置为显示：块或线高度：0，但我没有测试后者是否是一个好的修复方法。"

我将line-height:0应用于包含导航图片的<div>。 这对我起作用了。

- eamo

---

这才是真正的答案，比起得到8个“去读读盒模型”的回答要好得多 :) - Chad Okere

这可能是答案，但这里没有图片。所以，除非这种傻瓜方法也适用于<li>，否则肯定有其他问题。 - Dakota

请注意，我将 line-height: 0; 设置在 父级 div 元素上，而不是图像内部。我曾尝试过 #parent img { line-height: 0; }，但那并没有起作用。#parent { line-height: 0; } 才是解决方案！ - Yes Barry

Answer 2

当使用inline-block时，这是一个有趣且微妙但重要的考虑因素。

简短的答案是：将ul上的vertical-align设置为任何不是baseline的东西。

这样做的原因是inline-block被视为文本，因此会受到基于文本的属性（如行高和垂直对齐）的影响。

---

较长的答案如下：

CSS3规范深入介绍了框模型的工作方式。以下摘自CSS3框规范的引用中，我已经突出了与此问题相关的部分：

9.5. ‘Inline-block’ or floating, non-replaced elements

... 使用的height的值是计算值，除非它是“auto”，那么使用的值由“流根的‘Auto’高度”定义。

让我们来看看流根的自动高度是什么：

9.10. ‘Auto’ heights for flow roots

在某些情况下（见前面的章节），元素的高度计算如下：

• 如果它只有内联级别的子元素，则高度是最高行框顶部和底部行框底部之间的距离。

...

行框的部分很有意思。这实际上意味着将任何设置为inline-block显示的内容都受到纯文本使用的隐式框布局的影响。

现在您可能已经猜到为什么设置vertical-align会解决此问题，但让我们继续通过规范跟踪此问题。

line-box 的定义有些单调，第4.2节 中的示例只是稍微有点帮助。

让我们回到 CSS 2.1 规范，它在解释行框方面做得更好:

  

包含形成一行的盒子的矩形区域称为行框...[其高度]由线高度计算中给出的规则确定。

从这个解释中，我们可以看出 line-height 和 vertical-align 属性与高度（行框和内联块元素）如何计算有关。阅读线高度计算几乎可以清楚地了解：

  

...如果[line boxes]对齐为“顶部”或“底部”，则必须对齐以使行框高度最小化。

因此，内联块元素的高度受其隐式行框的高度计算影响，隐式行框又受这些垂直对齐计算的影响。

因此，当我们不使用基线作为内联块的垂直对齐方式时，该框的隐式行框将缩小到它可以的最小尺寸。

混乱？...是的。只需跳回更短的答案 :)

- Chris

---

好的，在尝试了各种可能的 vertical-align 值后，我很满意你是完全正确的。你只是稍微有点偏差：在这种特定情况下，top、text-top、middle、bottom、text-bottom 和 sub 会产生期望的行为，而剩下的三个值（px 或 % 中的 height 和 baseline）则会导致其他类型的错误。通过调整一些 height 值（以 px 为单位），我发现有人可能会将它们用作可变顶部/底部填充的形式，但那样做是愚蠢的。 :) - Dakota

我在折叠视图中的标题图片遇到了问题。将以下代码添加到我的CSS文件中解决了这个问题：.ui-accordion-header { margin: 0; padding: 0; line-height: 0; }其中，line-height: 0; 是关键设置。 - Joe

Answer 3

这是因为DOCTYPE将呈现模式改为标准兼容模式。具体来说，这意味着您现在正在使用W3C盒子模型，该模型计算块元素的宽度/高度与怪异模式不同。

在这里、这里和这里了解更多信息。

- Matt

---

是的，我明白了，但我已经将所有边距/填充强制设置为0/应该是什么。我不是新手，只是有点困惑，为什么因为盒模型在一个div上会得到额外的空间。好的，但这到底为什么会改变高度？ - Dakota

我仍然在想为什么只填充宽度，却会影响高度。 - Dakota

@Dakota，你是在说为什么“monkey”字体大小是26px吗？我猜你期望它是24px或者其他的大小？ - Matt

我以为 #monkey 的高度会和它的子元素 <ul> 一样，但是我错了。这里有4个额外的像素，就像盒模型一样。 - Dakota

Answer 4

尝试这个：

CSS：

html * { margin:0; padding:0; }

- Walter

Answer 5

当我将一个XHTML4网站升级到HTML5时，我遇到了同样的问题。我有很多这样的代码：

<a><img></a>

这导致图像周围出现了神奇的额外填充。对我来说，解决方案很简单--添加以下CSS：

img { vertical-align: top; }

- GeekyMonkey

Answer 6

我从未使用display: inline-block，因为它在IE7上存在问题，所以我不熟悉它的怪癖。在您的情况下，似乎将其应用于ul#pagetab是不必要的，因为它周围没有内联元素。我会将其转换为常规块级元素。此外，由于它包含了一些不需要浮动在某些内联元素旁边的浮动元素，我会通过display: block; overflow: hidden;为ul#pagetab设置实际高度。

这似乎解决了您所有的问题（我无法详细说明），并提供了更合适的样式。

- Steven

Answer 7

兄弟，你的页面里有两个多余的 </div> 标签。在第32行和第34行。删掉重试一下，看看能不能解决问题。

- Strelok

Answer 8

哇，@matt是对的（不是在这种情况下），这是常识，但你们都错了。

伙计，看看你的CSS，你有：

pagetab {background-color: #ff2d00; padding: 0px 4px; margin: 0; display: inline-block;}

pagetab ul {list-style: none; margin: 0px; padding: 0px 4px; display: block;}

为......

所以第二个声明是嵌套在#pagetab中出现的ul上的。你没有任何一个这样的元素。

我把ul从声明中拿掉了，这样它们就在正确的元素上了。现在你的CSS有两个匹配的样式（也被调用在你的通用选择器中（顺便说一句，这个选择器在你的body{}声明之上）），所以这是3个样式……过度了伙计。而且，那些不匹配的样式，你将其设置为display:inline-block，然后重置为block……我在这个逻辑中迷失了。

所以，采取你的例子。将两个pagetab样式更改为：

pagetab {

background-color: #ff2d00;
padding: 0px 4px;
margin: 0;

}

页面标签 {

list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;

}

保存它。现在将其剥离，将其保存为#2。在FF3.6上的7中，它们是相同的。

如果您使用专门用于解决/预防此类问题的验证器以及qa工具（特别是我在这里谈论的dust-me选择器书签），您将立即解决此问题。

回到Web标准，通用CSS：* {}是通用的，因此只要另一个声明不覆盖*的特定性，它就始终有效。 换句话说，如果您在页面顶部声明* {margin:0; padding:0; border:none}，则无需在每个单独元素上放置margin:0; padding:0;。您已经拥有了。

Web标准，它们将拯救您的生命。

- albert

---

虽然我注意到你的答案对我的原始示例是正确的，但我进行了一些更改，以使示例更加清晰。你说得对，我的CSS完全愚蠢，但它是在我几乎不了解网页设计/开发时编写的，我还没有机会将其全部清理干净。如果你看看当前的示例，你就会明白我的意思。然而，你的答案并没有解决我实际提问的4像素问题。 - Dakota

我喜欢阅读一些人花时间“格式化”和正确输入的内容。 - Ben

@Steve 因为敢于在上面放置你的名字而值得赞扬。我还没有看到像你这样的神话般的格式指南巨魔离开。你就是最棒的。 - albert

@albert - 干杯。http://meta.stackexchange.com/questions/18614/style-guide-for-questions-and-answers - Ben