Question

div（#second）溢出li height: 2em;容器li我只能看到它发生的原因是reset.css内有一些神秘的填充。但为什么？使用height: 1em（例如，Eric Meyer）似乎也没有任何区别。请帮忙。（对于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; }，没有问题。）

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

CSS：

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

HTML：

{{1}}

Answer 1

这是因为当您使用display: inline-block时，baseline将位于中间位置。您可以将基线中间的元素与：

对齐

vertical-align: middle;

jsFiddle

Answer 2

内容从li的中间开始，因为div高于推出li顶部的li。

修正：

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

Answer 3

它基于行高而不是填充或边距。将高度降低到1.8em或降低li的行高。

Answer 4

添加vertical-align:top;可以解决问题（如果要在垂直中心对齐div，请使用middle。）

jsfiddle

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

为什么显示屏周围会出现神秘的填充：内联块？

4 个答案:

jsFiddle