为什么HTML5 DOCTYPE与我的填充混乱？ [英] Why does the HTML5 DOCTYPE mess with my padding?

问题描述

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

I have an html5 page with a navbar. Completely scratch coded. I just recently added a doctype to the item, and now I’m getting extra space under my navbar. If I remove the doctype declaration, it goes back to normal. I have completely reset padding, margins, etc. on everything, and cut it down to the a small amount of code that illustrates the issue.

页面可以在 http://hackthetruth.org/webdesign/broken

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

Does anyone know why declaring the doctype is messing with the height of a div?

推荐答案

这是一个有趣而微妙的使用内联块时需要考虑重要因素。

This is an interesting and subtle, yet important consideration when using inline-block.

简短回答是：设置您的 ul 上的vertical-align 除 baseline 以外的任何内容。

The short answer is: set vertical-align on your ul to anything other than baseline.

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

The reason this works is that inline-blocks are considered text, and thus are subjected to text-based properties such as line-height and vertical-align.

更长的答案如下：

CSS3规范涉及到一些（可能令人困惑） ）德关于盒子模型的工作原理。这是CSS3盒子规格的引用，其中我突出显示了与此问题相关的部分：

The CSS3 specification goes in to some (perhaps confusing) depth around how the box model works. Here's a quote from the CSS3 box spec, in which I've highlighted the part that's relevant to this problem:

9.5。 '内联块'或浮动的，未替换的元素

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

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

... The used value of height is the computed value, unless that is ‘auto’, when the used value is defined by "‘Auto’ heights for flow roots."

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

Let's check what the auto heights for flow roots are:

9.10。流量根的自动高度

9.10. ‘Auto’ heights for flow roots

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

In certain cases (see the preceding sections), the height of an element is computed as follows:

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

...

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

The line box parts are of interest. What this effectively implies is that anything set to display as inline-block is subject to the implicit box layouts that plain text uses.

你现在可以猜到为什么设置 vertical-align 修复了这个问题，但让我们继续追踪这个问题通过规范。

You might be able to guess now why setting vertical-align fixes this problem, but let's continue tracing this problem through the spec.

line-box 定义有点黯淡，第4.2节只是略有帮助。

让我们回到CSS 2.1规范，它在说明线框：

Let's go back to the CSS 2.1 spec, which does a far nicer job at explaining line boxes:

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

The rectangular area that contains the boxes that form a line is called a line box ... [its height] is determined by the rules given in the section on line height calculations.

从这个解释中，我们看到行高和 vertical-align 属性与高度（行数）有关计算框，即内联块元素。阅读行高的计算几乎可以清楚地表明：

From this explanation, we see that the line-height and vertical-align properties have something to do with how the heights (of line boxes, thus inline-block elements) are calculated. Reading the calculations of line-height almost make it clear:

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

...In case [line boxes] are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.

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

So our inline-block element's height is being affected by its implicit line box's height calculations, which are in turn subject to these vertical-alignment calculations.

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

So it would seem that when we don't use baseline as a vertical-align for an inline-block, the box's implicit line box will shrink to the smallest size it can.

令人困惑？ ...是啊。回到简短的回答：）

Confusing? ...Yeah. Just jump back to the shorter answer :)

这篇关于为什么HTML5 DOCTYPE与我的填充混乱？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！