为什么从 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

这是因为 inline-block 元素的 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>

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

Why does removing text from div cause this layout to break

html

css

vertical-alignment