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

问题描述

我从第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>

解决方法

这是因为内联块元素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>

html vertical-alignment