为什么HTML5 DOCTYPE与我的填充混乱？

Question

我有一个带导航栏的html5页面.完全划痕编码.我刚刚在项目中添加了一个doctype,现在我的导航栏下面有额外的空间.如果我删除doctype声明,它将恢复正常.我已经完全重置了所有内容的填充,边距等,并将其缩减为少量代码来说明问题.

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

Answer 1

我的一个网站遇到了同样的问题.我在这里找到了这个答案:

"使用HTML5文档类型,图像会接收文本通常会获得的行高属性,因此您可以在其下方获得"边距".您可以将它们设置为显示:block或line-height:0,尽管我没有对后者进行足够的测试,以确保它是一个很好的解决方案."

余施加line-height:0到<div>其中载有导航图像.它为我做了伎俩.

Answer 2

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

简短的回答是:设置vertical-align你的ul比其他任何东西baseline.

这样做的原因是内联块被认为是文本,因此受到基于文本的属性,例如行高和垂直对齐.

答案越长越好:

CSS3规范涉及到盒子模型如何工作的一些(可能是令人困惑的)深度.这是CSS3盒子规范的引用,其中我突出显示了与此问题相关的部分:

9.5.'内联块'或浮动的,未替换的元素

...使用的值height是计算值,除非是'auto',当使用的值由"'自动'高度为流量根定义"时.

让我们来看看流量根的自动高度是多少:

9.10.流动根的'自动'高度

在某些情况下(参见前面的部分),元素的高度计算如下:

如果它只有内联级别的子级,则高度是最顶部的行框顶部与最下面的行框底部之间的距离.

...

线盒部件是感兴趣的.这有效地暗示了任何设置为显示为内联块的内容都受纯文本使用的隐式框布局的约束.

您现在可以猜测为什么设置vertical-align修复此问题,但让我们继续通过规范跟踪此问题.

该line-box定义是有点平淡无奇,而在例如4.2节只是勉强有帮助的.

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

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

从这个解释中,我们看到line-height和vertical-align属性与如何计算高度(线框,因此内联块元素)有关.阅读行高的计算几乎可以清楚地表明:

...如果[线框]对齐"顶部"或"底部",则必须对齐它们以便最小化线框高度.

因此,我们的内联块元素的高度受其隐式线框高度计算的影响,而这些高度计算又受这些垂直对齐计算的影响.

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

混乱？...是啊.快回到更短的答案:)

Answer 3

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

在这里,这里和这里阅读更多内容.