的更新

Question

jsFiddle Demo

我似乎无法弄清楚为什么使用display:inline-block会导致此<div>元素在隐藏其包含元素时以某种方式获得高度。 display:block不会发生这种情况。

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>

screenshot of jsfiddle

为什么display:inline-block导致此处描述的差距？

Answer 1

创建display:inline-block时发生的一件事是line-height计算会发生变化：

在内联格式化上下文中，框是水平布局的，一个在另一个之后，从包含块的顶部开始。这些之间会考虑水平边距，边框和填充框。盒子可以以不同的方式垂直对齐：它们底部或顶部可以对齐，或其中的文本基线 可能是对齐的。

来源：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是他们边缘盒子的高度;对于内联盒，这是他们的“行高”。

来源：http://www.w3.org/TR/CSS2/visudet.html#line-height

CSS假定每种字体都有指定a的字体指标高于基线的特征高度和低于基线的深度。在这我们使用A来表示该高度（对于给定的给定字体）尺寸）和D的深度。我们还定义AD = A + D，距离从上到下。

来源：http://www.w3.org/TR/CSS2/visudet.html#inline-box-height

因此，行高将在其字体类型上定义。但是，当inline-block为空时，它将具有基本line-height。然而，它仍然试图用字体生成他的line-height。

要快速解决这个问题，你可以使用一个包装器，它定义了没有字体的独占性，所以没有line-height导致没有高度：

.wrapper
{
    font-size: 0;
}

您可以在inline-block：

中重置此属性的位置

.wrapper div
{
    font-size: medium;
}

font-size的默认值为中等。

<强> jsFiddle

通过这种方式，您仍然可以使用inline-block中的内容，而不会有差距。

的更新

此更新是由于Kevin Wheelers comment

...我很困惑，它仍然没有说明空内联块元素的高度。 ...

我想要注意的是，我没有找到任何关于此的官方文档，但通过测试我找到了常见的模式。

简短版本：

只需将其视为inline-block预期内容并根据已知line-height预留最小行余额。

更多见解：

JsFiddle as a more clear example

正如您所看到的，inline-block身高的噱头基于line-height，我们已在第一篇帖子中确定了这一点。

现在line-height来自哪里？

它继承自第一个阻止line-height：<body>元素。

您可以通过更改font-size，font-family或line-height元素的<body>对此进行测试。

因此它为其内容保留line-box。根据{{3}}：
，您可以看到它完全可见，这很奇怪

不包含文本，没有保留的空格，没有非零边距的内嵌元素，填充或边框，没有其他插入内容（如图像，内联块或内联表）的行框，以及为了确定其中任何元素的位置，必须将保留换行符作为零高度线框处理，并且必须将其视为不存在用于任何其他目的。

它为inline-block，中的每个其他元素执行此操作，但它似乎始终保留最小行空间。

Answer 2

显然，display:inline-block默认设置的内容是基于其父height设置的视觉line-height。该解决方案使用以下属性创建父包装器：

#container {
  line-height:0;
}

演示 http://jsfiddle.net/FE3Gy/33/ 。在这里，您可以查看具有不同font-size值的示例。

对W3的说法是：

内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

关于此处的内联框

线框的宽度由包含块和浮点数确定。线框的高度由线高计算部分中给出的规则确定。

因此，您可以在此处查看有关line-height的更多信息：

http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 3

好的，正如评论中已经非常简短地提到的那样：

<强>内联块

此值使元素生成内联级块   容器。内联块的内部格式化为块框，   并且元素本身被格式化为原子内联级别框。

<强>内联

此值使元素生成一个或多个内联框。

本主题最重要的部分是元素本身的格式不仅仅是内容。每个内嵌块元素都将被视为原子内联框，从而占用空间。

来源：http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

Answer 4

无论您有隐藏的输入还是空格或其他内容，您都会得到一个实际的行 - 您的浏览器认为它是一些内联内容，因此它会得到一条线。

http://jsfiddle.net/FE3Gy/7/

<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>

即使你什么都没有，你也会得到一条线。 display: inline-block将其转换为内联内容。

http://jsfiddle.net/FE3Gy/15/

Answer 5

Layne和Nate有正确的答案，但我想提请你注意CSS 2.1规范第9.4.2节中的这一条款。

根据需要创建行框以保存其中的内嵌级内容内联格式化上下文。没有文字的行框，没有保留的空白区域，没有非零边距的内联元素，填充或边框，没有其他流入内容（如图像，内联块或内联表），并且不以保留结束换行必须被视为零高度线框确定其中任何元素的位置，并且必须是被视为不存在于任何其他目的。

没有插入内容的{（inline个元素）（<input type="hidden" />为display:none因此无法视为插播内容）符合这些条件，因此其包含的行框被视为0高度或不存在。 inline-block元素被明确排除在满足这些条件之外，因此inline-block元素会创建一个必须为行高的行框。

请注意，您可以通过向span元素添加边框以其他方式查看此操作，以使其不符合上述条件。见http://jsfiddle.net/FE3Gy/36/

Answer 6

display：inline-block与display：block有不同的行为。虽然块创建一个框元素，但内联块会创建一个框，但它会添加一些周围的内容，就好像它是一个内联元素一样。此周围的内容可能是您的问题的根源。我认为除非你有一个非常具体的理由使用内联块，你应该使用display：block。

Answer 7

正如上面提到的@nkmol，它确实带有默认字体大小和行高，导致父母不必要的高度。在某些情况下，line-height：0确实可以解决问题。但有时，在特殊情况下，如父母内部的空标记

<div>
<a href=''></a>
</div>

我在上面的情况下，只设置font-size：0或line-height：0并不能解决问题作为标签。

vertical-align: middle;

在这种情况下修复了问题。

为什么内联块导致这个div有高度？

7 个答案:

的更新

简短版本：

更多见解：