为什么这个HTML输出会改变？

Question

我正在玩CSS和HTML，当我在div标签中添加文本时，我不确定为什么输出会发生变化。

首先：

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color: teal;
    margin-right: 2px;
}

<div class="bar" style="height: 15px;"></div>
<div class="bar" style="height: 20px;"></div>
<div class="bar" style="height: 25px;"></div>
<div class="bar" style="height: 30px;"></div>

输出为四个柱。

第二

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color: teal;
    margin-right: 2px;
}

<div class="bar" style="height: 15px;">15</div>
<div class="bar" style="height: 20px;">20</div>
<div class="bar" style="height: 25px;">25</div>
<div class="bar" style="height: 30px;">30</div>

输出相同但是颠倒了。

我希望你能告诉我原因。

Answer 1

这是因为默认的垂直对齐方式baseline。使用vertical-align: bottom来修复行为：

    div.bar {
        display: inline-block;
        width: 20px;
        height: 75px;   /* We'll override height later */
        background-color: teal;
        margin-right: 2px;
        vertical-align: bottom;
    }

    <div class="bar" style="height: 15px;">15</div>
    <div class="bar" style="height: 20px;">20</div>
    <div class="bar" style="height: 25px;">25</div>
    <div class="bar" style="height: 30px;">30</div>

Answer 2

尝试使用vertical-align: bottom;！