Html 为什么 inline-block 会导致这个 div 有高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20106428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does inline-block cause this div to have height?
提问by Travis J
I cannot seem to figure out why using display:inline-blockwould cause this <div>element to somehow gain height when its containing element was hidden. This does not happen with display:block.
我似乎无法弄清楚为什么使用display:inline-block会导致该<div>元素在其包含元素被隐藏时以某种方式获得高度。这不会发生在display:block.
html:
html：
<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Why does display:inline-blockcause the gap depicted here?
为什么会display:inline-block造成这里描绘的差距？
采纳答案by DaniP
Ok as already mentioned very briefly in the comments:
好的，正如评论中已经非常简要地提到的：
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
内联块
该值导致元素生成内联级块容器。行内块的内部被格式化为块框，元素本身被格式化为原子行内级框。
排队
该值使元素生成一个或多个内联框。
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-blockelement will be seen as atomic inline boxand thus take up space.
这个主题最重要的部分是元素本身被格式化，而不仅仅是内容。每个内联块元素都将被视为原子内联框，因此会占用空间。
回答by nkmol
One thing that happens when you create a display:inline-blockis that the line-heightcalculations will change:
创建 a 时发生的一件事display:inline-block是line-height计算会发生变化：
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within themmay be aligned.
在行内格式化上下文中，框从包含块的顶部开始一个接一个地水平排列。这些框之间遵循水平边距、边框和填充。这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内文本的基线可以对齐。
source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
来源：http: //www.w3.org/TR/CSS2/visuren.html#block-formatting
The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
计算 line box 中每个 inline-level box 的高度。对于替换元素、行内块元素和行内表格元素，这是它们的边距框的高度；对于内联框，这是它们的“行高”。
source: http://www.w3.org/TR/CSS2/visudet.html#line-height
来源：http: //www.w3.org/TR/CSS2/visudet.html#line-height
CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom.
CSS 假定每种字体都有字体度量，这些度量指定了基线上方的特征高度和基线下方的深度。在本节中，我们使用 A 表示高度（对于给定大小的给定字体）和 D 表示深度。我们还定义了 AD = A + D，即从顶部到底部的距离。
source: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
来源：http: //www.w3.org/TR/CSS2/visudet.html#inline-box-height
So the line height will be defined on their font type. However when the inline-blockis empty it will have its basic line-height. It however still tries to generate his line-heightwith a font.
所以行高将在它们的字体类型上定义。但是，当inline-block为空时，它将具有其基本的line-height. 然而，它仍然试图line-height用字体生成他的。
To quick fix this you can use a wrapper which defines exclusive that there is no font, so no line-heightwhich leads into no height:
要快速解决此问题，您可以使用一个包装器，该包装器定义了没有字体的排他性，因此 noline-height导致没有高度：
.wrapper
{
font-size: 0;
}
Where you can reset this property in your inline-block:
您可以在哪里重置此属性inline-block：
.wrapper div
{
font-size: medium;
}
Where the default value of font-sizeis medium.
其中 的默认值为font-size中等。
This way you can still use content in the inline-blockwithout there being a gap.
这样，您仍然可以在inline-block没有间隙的情况下使用内容。
Update
更新
This update is because of Kevin Wheelers comment
此更新是因为凯文惠勒斯评论
... I'm confused, it still never says what the height of an empty inline-block element is. ...
...我很困惑，它仍然没有说明空内联块元素的高度是多少。...
I want to note that I have not found any official documentation about this, though through testing I have found common patterns.
我想指出的是，我还没有找到任何关于此的官方文档，但通过测试我发现了常见的模式。
Short version:
精简版：
Just think of it as inline-blockexpects content and reserves a minimum line space based of the known line-height.
只需将其视为inline-block预期内容并保留基于已知的最小行空间line-height。
Some more insight:
更多的见解：
JsFiddle as a more clear example
As you can see the gab of the inline-blockheight is based on a line-height, which we have determed in the first post.
正如您所看到的，inline-block高度的line-heightgab是基于 a 的，我们在第一篇文章中已经确定了。
Now where does this line-heightcome from?
现在这line-height是从哪里来的？
It is inherited from the first that determs the line-height: the <body>element.
它继承自确定line-height:<body>元素的第一个。
You can test this my changing font-size, font-familyor the line-heightof the <body>element.
您可以测试这是我的变化font-size，font-family或line-height将的<body>元素。
So it reserves a line-boxfor it's content. Which is strange that it is visible at all, as you can see according to the W3 specs of inline-formatting:
所以它line-box为它的内容保留了一个。奇怪的是，它是可见的，正如您可以根据W3 的 inline-formatting 规范看到的：
Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
不包含文本、不保留空白、不包含非零边距、填充或边框的行内元素，也不包含其他流入内容（例如图像、行内块或行内表格），并且不以以下内容结尾的行框为了确定其中任何元素的位置，必须将保留的换行符视为零高度行框，并且必须将其视为不存在以用于任何其他目的。
It does this for every other element inside of the inline-block, but it always seems to reserve a minimum line space.
它对 内的每个其他元素都这样做inline-block，但它似乎总是保留最小行空间。
回答by DaniP
Apparently what display:inline-blockdoes for default is set a visual heightbased on his parent line-height. The solution make a parent wrapper with this properties:
显然display:inline-block，默认情况下是height根据他的 parent设置视觉效果line-height。该解决方案使用以下属性制作父包装器：
#container {
line-height:0;
}
The demo http://jsfiddle.net/FE3Gy/33/. Here you can check an example with different font-sizevalues.
演示http://jsfiddle.net/FE3Gy/33/。您可以在此处查看具有不同font-size值的示例。
Acorrding to the W3 is:
根据 W3 是：
The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
行内块的内部被格式化为块框，元素本身被格式化为原子行内级框。
About inline box here
关于内联框在这里
The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.
行框的宽度由包含块和浮点数的存在决定。行框的高度由行高计算部分中给出的规则确定。
So you can check more about line-heighthere :
所以你可以line-height在这里查看更多信息：
回答by Nate
You'll get an actual line whether you have a hidden input or a space or whatever - your browser thinks it's some inline content, therefore it gets a line.
无论您有隐藏的输入还是空格或其他任何东西，您都会得到一条实际的行 - 您的浏览器认为它是一些内联内容，因此它会得到一行。
<div style="display:inline-block;"> </div><div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Even if you have absolutely nothing, you'll get a line. display: inline-blockturns it into inline-content.
即使你一无所有，你也会得到一条线。display: inline-block把它变成内联内容。
回答by Alohci
Layne and Nate have the right answer, but I wanted to bring to your attention this clause from the CSS 2.1 spec, section 9.4.2.
Layne 和 Nate 给出了正确答案，但我想提请您注意 CSS 2.1 规范第 9.4.2 节中的这一条款。
Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
行框是根据需要创建的，以在内联格式上下文中保存内联级别的内容。不包含文本、不保留空白、不包含非零边距、填充或边框的行内元素，也不包含其他流入内容（例如图像、行内块或行内表格），并且不以以下内容结尾的行框为了确定其中任何元素的位置，必须将保留的换行符视为零高度行框，并且必须将其视为不存在以用于任何其他目的。
Spans (inlineelements) that have no in-flow content (<input type="hidden" />is display:noneso cannot be treated as in-flow content) meet those criteria so their containing line-boxes are treated as 0 height or non-existing. inline-blockelements are explicitly excluded from meeting those criteria so the inline-block element creates a line box that must be line-height tall.
跨度（inline不具有在流内容元素）（<input type="hidden" />被display:none所以不能被视为在流内容）符合这些标准，以便他们的线含有盒为0的高度或不存在的处理。inline-block元素被明确排除在满足这些条件之外，因此 inline-block 元素创建了一个行高必须为行高的行框。
Note that you can see this in action in another way by adding a border to a span element so that it doesn't comply with the above criteria. See http://jsfiddle.net/FE3Gy/36/
请注意，您可以通过向 span 元素添加边框以使其不符合上述标准以另一种方式查看此操作。见http://jsfiddle.net/FE3Gy/36/
回答by mib200
As cited above by @nkmol, its does carry default font size and line height causing unnecessary height for the parent. In some cases, line-height: 0 does solve the problem. But sometimes, in exceptional cases like an empty tag inside a parent
正如@nkmol 上面引用的那样，它确实带有默认字体大小和行高，导致父级不必要的高度。在某些情况下， line-height: 0 确实可以解决问题。但有时，在特殊情况下，例如父级中的空标签
<div>
<a href=''></a>
</div>
I above case, just setting the font-size: 0 or line-height: 0 doesn't solve the problem as the a tag.
我上面的情况，只是设置 font-size: 0 或 line-height: 0 并不能解决 a 标签的问题。
vertical-align: middle;
fixes the problem in such a case.
解决了这种情况下的问题。
回答by camicano
display:inline-block has different behavior than display:block. While block create a box element, inline block creates a box but it add some surrounding content as if it were a single inline element. This surrounding content could be the source of your issue. I think unless you have a very specific reason to use inline-block you should use display:block.
display:inline-block 与 display:block 有不同的行为。块创建一个盒子元素，内联块创建一个盒子，但它添加了一些周围的内容，就好像它是一个单独的内联元素。这些周围的内容可能是您问题的根源。我认为除非您有非常具体的理由使用 inline-block，否则您应该使用 display:block。
