html - 具有内联 block 属性的文本的空 div 与 div

Question

想知道这种行为的原因。

CSS

div {
   display: inline-block;
   margin-right: 2px;
   width: 20px;
   background-color: red;
}

空 div

<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>

行为:元素从下往上增加(高度)

带文本的 div

<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>

行为:元素从上到下增加(高度)

查看实际效果:http://jsfiddle.net/8GGYm/

Answer 1

基本上它与 vertical-align: 的计算方式有关。所以如果你把 vertical-aling:bottom; css 中的属性，那么你会注意到它在有文本和没有文本的情况下都是一样的。

您可以阅读 this了解更多详情。

当 div 没有内容时，不会在框中绘制填充(即当为 0 时，如果有内容，浏览器会计算填充的位置)。所以有文本和无文本的计算有一点不同。

希望对您有所帮助。