Css 为什么显示周围有一个神秘的填充：内联块？

div

（#秒）溢出其

li

容器，高度为2米我能看到它发生的唯一方式是由于

li

中的一些神秘填充。但是为什么呢？使用

reset.css

（比如Eric Meyer）似乎也没有什么区别。请帮忙。（对于

高度：1em

，没有问题。）

这是

CSS:

HTML:

第一
第三
第四
第五

内容从

li

的中间开始，因为

div

比

li

高，它推到

li

的顶部

修正：

---

它是以线的高度为基准的。。没有填充或空白。将高度降低至1.8em或降低li的线高度。

添加

垂直对齐：顶部

解决了该问题（如果要将div与垂直中心对齐，请使用

middle

）

---

这是因为当你使用<代码>显示：内联块< /代码>时，你将处于中间。你可以在基线中间对齐元素：

vertical-align: middle;

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

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

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;
    vertical-align: top;
}

vertical-align: middle;