空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>

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

Answer 1

请参阅此处： http: //jsfiddle.net/dd24z/。默认情况下文本是vertical-align: top，但您可以更改该行为：

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

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

默认的 `vertical-align` 是 `baseline` ([jsFiddle](http://jsfiddle.net/8GGYm/3/) - 单击结果框中的某处）如果里面没有文本，则 div 被视为图像将被处理，并且本身在基线上对齐。如果里面有文本，里面的文本将改为与基线对齐，而div将只是一个相应调整的包装器。由于文本与其父级的左上角对齐，因此 div 的其余部分填充向右和向下流动。 (2认同)