【问题标题】：Why does the HTML5 DOCTYPE mess with my padding?为什么 HTML5 DOCTYPE 与我的填充混淆？
【发布时间】：2011-03-01 11:46:08
【问题描述】：

我有一个带有导航栏的 html5 页面。完全从头开始编码。我最近刚刚为该项目添加了一个文档类型，现在我在导航栏下获得了额外的空间。如果我删除 doctype 声明，它会恢复正常。我已经完全重置了所有内容的填充、边距等，并将其缩减为说明问题的少量代码。

页面可见http://hackthetruth.org/webdesign/broken

有谁知道为什么声明 doctype 会影响 div 的高度？

【问题讨论】：

1.为什么你在没有 doctype 声明的情况下开始你的设计？ 2. 我想帮忙，但我使用的是 FF，因此会收到一条“使用 webkit”消息（似乎也缺少 doctype 声明）。
我现在也打开了 Firefox，并在浏览器页面中添加了一个文档类型。我仍然有这个问题，并且无法引用它来弄清楚。由于有已知数量的额外空间，我已经为我的主站点做了一个补丁，其边距为负。我感兴趣的是如何解决这个问题。这似乎是渲染引擎中的某种怪癖，因为

标签： html padding doctype

【解决方案1】：

这是因为 DOCTYPE 将呈现模式更改为标准合规模式。具体来说，这意味着您现在正在使用 W3C 盒模型，它计算块元素的宽度/高度的方式与 quirks 模式不同。

阅读更多here、here 和 here。

【讨论】：

是的，我得到了这么多，但我已将所有内容的所有边距/填充强制为 0/无论它们应该是什么。我对整个 web 事情并不陌生，只是有点困惑，为什么我会因为盒子模型而在 ONE div 上获得额外的空间，但为什么这会改变高度呢？
我仍然想知道为什么这对高度有任何影响，当我只填充宽度时。
@Dakota 你在说为什么“猴子”是 26px？我猜你希望它是 24px 还是什么？
我认为#monkey 的高度与它的孩子

【解决方案2】：

伴侣，您在该页面中有 2 个流浪的 </div> 标签。在第 32 和 34 行。删除并重试。看看能不能解决。

【讨论】：

【解决方案3】：

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

“使用 HTML5 文档类型，图像接收似乎是文本通常获得的行高属性，因此您会在它们下方获得一个“边距”。您可以将它们设置为 display:block 或 line -height:0，尽管我没有对后者进行足够的测试以确保它是一个好的修复。”

我将line-height:0 应用于包含导航图像的<div>。它对我有用。

【讨论】：

这是实际的答案，比 +8 上的“去了解盒子模型”的答案要好得多 :)
这就是答案，但是这里没有图片。所以，除非同样的愚蠢可以应用到<li>s，否则它在起作用。
请注意，我将line-height: 0; 设置为 parent div 元素，而不是里面的图像。我曾尝试过#parent img { line-height: 0; }，但这并没有起作用。 #parent { line-height: 0; } 是解决方案！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

老兄看看@你的css，你有

pagetab {背景颜色：#ff2d00;填充：0px 4px；边距：0；显示：内联块；}

pagetab ul {列表样式：无；边距：0px；填充：0px 4px；显示：块；}

为了.....

因此第二个声明位于 #pagetab 中的嵌套 ul 上。你没有这些。

我从声明中删除了 ul，因此它们位于正确的元素上。现在您的 css 有 2 种样式可以匹配两者（并且在您的通用选择器中也被调用（仅供参考，它位于您的 body{} 声明之上））所以这就是 3 种样式....矫枉过正的家伙。此外，那些不匹配的，您将其设置为 display:inline-block 然后将其重置为 block...我迷失在这个逻辑中。

所以以你为例。把两个pagetab样式改成这个

页面标签{

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

}

页面标签{

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

}

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

如果您使用专门为解决/预防此类问题而提供的验证器，以及 qa 工具（特别是这里我说的是dust-me selectors 小书签），您将很快解决这个问题。

回到 web 标准，gen ed css: *{} 是通用的，所以只要另一个声明不覆盖 * 的特殊性，它就会一直有效。用英文，如果你声明 *{margin:0;填充：0； border:none} 在页面顶部，您不必放置 margin:0;填充：0；在每一个元素上。你已经有了。

网络标准，它们会拯救你的生命。

【讨论】：

虽然我注意到您的回答对于我的原始示例是正确的，但我进行了一些更改以使示例更加清晰。你是对的，我的 CSS 完全是愚蠢的，但它是在我对网页设计/开发几乎一无所知并且我还没有机会清理它的时候编写的。如果你看一下当前的例子，你就会明白我的意思。 但是，您的回答并没有解决我实际询问的 4 像素问题。
我喜欢阅读某些东西 E pepl 把时间转到format 并输入 properle
@steve 将你的名字写在上面。仍然没有看到像你这样的巨魔离开的神话风格格式指南。你 === 真棒
@albert - 干杯。 meta.stackexchange.com/questions/18614/…

【解决方案6】：

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

简短的回答是：将ul 上的vertical-align 设置为baseline 以外的任何值。

这样做的原因是内联块被视为文本，因此受制于基于文本的属性，例如 line-height 和 vertical-align。

较长的答案如下：

CSS3 规范深入探讨了盒模型的工作原理（可能令人困惑）。这是 CSS3 框规范的引述，其中我强调了与此问题相关的部分：

9.5。 “内联块”或浮动、不可替换的元素

...height的使用值为计算值，除非是‘auto’，当使用的值由‘‘Auto’定义时流根的高度。”

让我们检查一下流根的自动高度是多少：

9.10。流根的“自动”高度

在某些情况下（参见前面的部分），元素计算如下：

如果它只有内联子级，则高度是最顶层行框的顶部与底部的距离最底线框。

...

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

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

line-box 的定义有点乏善可陈，section 4.2 中的示例仅提供了一点帮助。

让我们回到 CSS 2.1 规范，explaining line boxes 做得更好：

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

从这个解释中，我们看到line-height 和vertical-align 属性与（线框的高度，因此是内联块元素）的计算方式有关。阅读calculations of line-height 几乎可以说清楚：

...如果 [line box] 对齐 'top' 或 'bottom'，它们必须对齐以最小化 line box 高度。

因此，我们的 inline-block 元素的高度会受到其隐式线框高度计算的影响，而这些计算又会受到这些垂直对齐计算的影响。

所以看起来当我们不使用基线作为内联块的垂直对齐时，盒子的隐含线框会缩小到它可以的最小尺寸。

令人困惑？ ...是的。只需跳回较短的答案:)

【讨论】：

好吧，在处理了vertical-align 的各种可能值之后，我很满意你完全正确。您只是稍微偏离了一点：在这种特定情况下，top、text-top、middle、bottom、text-bottom 和 sub 会产生所需的行为，而其余三个值 (height在px 或% 和baseline) 中会导致其他一些错误。弄乱一些height 值（在px 中）我已经看到有人可能会使用它们作为可变顶部/底部填充的一种形式，但这很愚蠢。 :)
我的手风琴视图中带有图像的标题有这个问题。添加 .ui-accordion-header { margin: 0;填充：0；行高：0； } 到我的 css 文件解决了这个问题。行高：0；是关键设置。

【解决方案7】：

试试这个：

css:

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

【讨论】：

【解决方案8】：

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

<a><img></a>

最终在图像周围添加了神奇的额外填充。对我来说，解决方案很简单——添加这个 css：

img { vertical-align: top; }

【讨论】：