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 with text

<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：的方式有关。所以，如果你把垂直方向：底部;在css中的属性然后你会注意到有和没有文本的相同。

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

当div没有内容时，框中没有绘制填充（即，当为0时，如果有内容，则浏览器计算填充的位置）。所以使用和不使用文本进行计算会有一些差别。

希望这有用。

Answer 2

嗨，请看这里：http://jsfiddle.net/dd24z/默认情况下，text垂直对齐到顶部，但您可以更改该行为;

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

http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height

'vertical-align'：基线将框的基线与父框的基线对齐。如果框没有基线，请将框的底部与父级的基线对齐。

Answer 3

添加

vertical-align: bottom;

到你的CSS。希望它能按你的意愿运作。

Answer 4

我想这可以通过文本对齐来解释，与div无关。

文本放置在div中时，默认情况下垂直对齐到左上角。那些没有文本的div彼此对齐（内联块）向下扩展页面。如果你添加另一个div，你会看到第二个标题更进一步。

<h1>Empty div</h1>
Some text
    <div style="height:20px;"></div>
    <div style="height:40px;"></div>
    <div style="height:60px;"></div>
    <div style="height:80px;"></div>
continuing here

<h2>Div with text</h2>
Some text 
    <div style="height:20px;">20</div>
    <div style="height:40px;">40</div>
    <div style="height:60px;">60</div>
    <div style="height:80px;">80</div>
continuing here

...

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

Fiddle

在上面的小提琴中，您可以看到文本行是“指南”。

也许这就是解释：一旦div中有文本，他们就会将它与周围的文本对齐，如果不存在，那么他们就会对齐他们的底线。

对不起，也许不是很清楚，但我希望你理解我的观点。

空div与div，文本具有内联块属性

4 个答案: