为什么从div中删除文本会导致此布局中断

Question

我从第9个div中删除了文本，得到了意外的结果。当我从其他div中删除文本时也会发生同样的情况。我认为问题出在display: inline-block中。

以下是我的HTML和CSS问题示例：

.relative {
position: relative;
width: 80px;
height: 80px;
background: red;
display: inline-block;
}

<div class="relative">1</div>
<div class="relative">2</div>
<div class="relative">3</div>
<div class="relative">4</div>
<div class="relative">5</div>
<div class="relative">6</div>
<div class="relative">7</div>
<div class="relative">8</div>
<div class="relative"></div>
<div class="relative">10</div>

Answer 1

这是因为内联块元素的baseline处默认垂直对齐。如果没有内容，对齐方式将沿着元素的底部(=与其他元素的文本基线对齐(。

使用vertical-align: top;来避免：

.relative {
position: relative;
width: 80px;
height: 80px;
background: red;
display: inline-block;
vertical-align: top;
margin-bottom: 3px;
}

<div class="relative">1</div>
<div class="relative">2</div>
<div class="relative">3</div>
<div class="relative">4</div>
<div class="relative">5</div>
<div class="relative">6</div>
<div class="relative">7</div>
<div class="relative">8</div>
<div class="relative"></div>
<div class="relative">10</div>