爲什麼這個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;！