展示块和内联块之间间距的区别

Question

今天我遇到了一个非常奇怪的问题，但我无法找出原因。

以下是HTML代码：

<div class="a"><div class="b"></div></div>

还有 CSS：

.a {
    background: blue;
}

.b {
    display:inline-block;
    height: 30px;
    width: 30px;
    background: red;
}

我希望外层的"a" div与其包含的"b" div 一样高，即30px。但是在渲染时，"a" 的高度为35px。在 "b" 下面有5个像素的空白。为什么会这样呢？

请参见http://jsfiddle.net/Pb2q9/。 我已经在Chrome和Firefox上尝试过，它们都给出了相同的输出。

奇怪的是，如果将“b”更改为display:block，则底部的额外空间将消失。 有人能解释为什么这两种情况会呈现不同的效果吗？inline-block有什么特殊之处，可以解释为什么应该存在5px的空间？

编辑：

更奇怪的是，如果您将HTML更改为

<div class="a"><div class="b">x</div></div>

注意 b div 中只有一个 "x" 字符，底部额外的 5px 将消失！

- cpalmer

---

这不是bug。inline-block元素会呈现出空白间隔。 - Arda

相关帖子：https://dev59.com/aXRB5IYBdhLWcg3weXSX，https://dev59.com/Dm445IYBdhLWcg3wBVzz，https://dev59.com/DWQn5IYBdhLWcg3wpYf0，https://dev59.com/E3I-5IYBdhLWcg3weoTR。 - Aziz Shaikh

Answer 1

您看到的垂直白色空间是由于行高属性在起作用。如果您在父元素上设置line-height: 0，则可以看到间距消失 - http://jsfiddle.net/Pb2q9/9/ 当使用内联块级元素并希望实现块级元素的布局行为时，请记得将字体大小和行高都设置为0。

- Terry

Answer 2

这是内联块元素的正常行为。总会有空白间隔。 如果您想要移除元素的空白间隔，请将父容器的字体大小改为0像素。

.a{font-size:0px;}
.b{font-size:16px;}

Fiddle

- Arda

---

如果您将b div中的一个字母更改为"<div class="a"><div class="b">x</div></div>"，则额外的空格将消失。因此，inline-block元素不能总是具有该空格。似乎还有更奇怪的事情发生。 - cpalmer