css - 为什么显示: inline-block?周围有一个神秘的填充

Question

div (#second) 超出了它的 li 容器 height: 2em; 只有这样我才能看到它发生li 中的一些神秘填充。但为什么 ？使用 reset.css(例如，由 Eric Meyer 设计)似乎也没有任何区别。请帮忙。 (对于height: 1em，没有问题。)

这里是 http://jsfiddle.net/d84e5/

CSS:

li {
    display: inline-block;
    padding: 0 .5em;
    border: 1px solid #ccc;
    line-height: 3em;
}
#second {
    display: inline-block;
    background-color: #000;
    width: 50px;
    height: 2em;
}

HTML:

<ul>
    <li>first</li><!--
    --><li><div id="second"></div></li><!--
    --><li>third</li><!--
    --><li>fourth</li><!--
    --><li>fifth</li>
</ul>

Answer 1

这是因为当你使用 display: inline-block 你的 baseline将在中间。您可以将基线中间的元素对齐:

vertical-align: middle;

jsFiddle