想知道这种行为的原因。
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/
最佳答案
基本上它与 vertical-align: 的计算方式有关。所以如果你把 vertical-aling:bottom; css 中的属性,那么你会注意到它在有文本和没有文本的情况下都是一样的。
您可以阅读 this了解更多详情。
当 div 没有内容时,不会在框中绘制填充(即当为 0 时,如果有内容,浏览器会计算填充的位置)。所以有文本和无文本的计算有一点不同。
希望对您有所帮助。
关于html - 具有内联 block 属性的文本的空 div 与 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24862861/