显示块和内联块之间的间距差异

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”，30px高所需的一样高。但当呈现“a”是35px高。 “b”以下有5个空白像素。为什么呢？

参见http://jsfiddle.net/Pb2q9/ 我在Chrome和Firefox上尝试了这一点，它们都提供相同的输出。

奇怪的是，如果你改变“b”来显示：阻止底部的额外空间消失。任何人都可以解释为什么这两种情况呈现不同什么是内联块，它规定5px的空间应该存在？

编辑：

陌生人仍然发现如果你将HTML更改为

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

注意b div中的单个“x”字符，底部的额外5px消失了！

Answer 1

这是内联块元素的正常行为。总是有空白空间。 如果要删除元素的空格，请将父容器的fontsize更改为0px

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

Fiddle

Answer 2

您看到的垂直空白区域是由于游戏中的线高属性造成的。如果您在父元素上设置line-height: 0，则可以看到间距消失 - http://jsfiddle.net/Pb2q9/9/

使用内联块元素但又想要实现块级元素的布局行为时，请记住将font-size和line-height设置为0。