关于vertical-align不同取值表现差异及行框基线影响的技术咨询

先看一下你提供的完整代码示例：

<style>
  .short-box {
    width: 30px;
    height: 30px;
    background-color: pink;
    display: inline-block;
  }

  .box {
    background-color: bisque;
    margin-bottom: 10px;
  }

  .tall-box {
    width: 30px;
    height: 100px;
    background-color: pink;
    display: inline-block;
  }

  .text-bottom {
    vertical-align: text-bottom;
  }

  .text-top {
    vertical-align: text-top;
  }

  .bottom {
    vertical-align: bottom;
  }

  .top {
    vertical-align: top;
  }
</style>

<body>
  <div class="box">
    x
    <span class="tall-box text-bottom"></span>
    <span class="short-box"></span>
  </div>
  <div class="box">
    x
    <span class="tall-box text-top"></span>
    <span class="short-box"></span>
  </div>
  <div class="box">
    x
    <span class="tall-box bottom"></span>
    <span class="short-box"></span>
  </div>
  <div class="box">
    x
    <span class="tall-box top"></span>
    <span class="short-box"></span>
  </div>
</body>

为什么第一个和第三个盒子效果一致，而第二个和第四个不同？ #

核心原因在于 vertical-align 不同取值的对齐参考对象完全不一样：

• text-bottom/text-top 是相对于父元素文本字体的边缘对齐
• bottom/top 是相对于整个行框（line box）的边缘对齐

拆解第一个 & 第三个盒子的表现

我们先看第一个盒子里的元素：

• 文本 x 的基线（baseline）就是字母本身的底部，而 text-bottom 指的是字体的最底部（对于 x 这种没有下伸部分的字母，它和基线几乎重合）
• .tall-box.text-bottom 会把自身的底部对齐到文本的 text-bottom（也就是 x 的基线位置）
• .short-box 是默认的 vertical-align: baseline，它的基线（因为是无内容的 inline-block，基线就是自身的底部）会对齐到文本的基线

再看第三个盒子：

• .tall-box.bottom 是把自身的底部对齐到行框的底部
• 此时行框的底部由谁决定？因为 .short-box 的底部对齐文本基线，而文本基线刚好是行内最低的位置（.tall-box 没设置对齐前会默认把底部对齐基线，但这里设置了 bottom 后，它的底部会对齐到行框的底部——也就是 .short-box 的底部位置）

刚好在这个场景里，文本的 text-bottom 和行框的底部是同一个位置，所以两个盒子的视觉效果完全一致。

拆解第二个 & 第四个盒子的表现

第二个盒子里的 .tall-box.text-top：

• 它会把自身的顶部对齐到文本的 text-top（也就是字母 x 的顶部）
• 此时 .tall-box 的位置是向下偏移的，它的顶部和 x 的顶部齐平，底部则延伸到 x 基线下方很远的位置，行框的高度也会被拉到从 x 的顶部到 .tall-box 的底部

第四个盒子里的 .tall-box.top：

• 它会把自身的顶部对齐到行框的顶部
• 这里行框的顶部是由 .tall-box 自己的顶部决定的（因为它是行内最高的元素），所以 .tall-box 的顶部会直接顶在行框最上方，远高于文本 x 的顶部
• 文本 x 还是保持在基线位置，.short-box 的底部对齐基线，所以整个行框的高度是从 .tall-box 的顶部到 .short-box 的底部

显然，这两种对齐方式的参考点差了一大截，视觉效果自然不一样。

vertical-align 如何影响行框的基线？ #

行框的基线不是固定的，它是由所有行内元素的对齐行为共同决定的：

• 当行内元素都用默认的 baseline 对齐时，行框的基线通常由文本的基线主导（如果有 inline-block 元素且无内容，它的基线是自身底部，也会参与基线对齐）
• 当某个元素设置了非 baseline 的对齐值（比如 top/bottom/text-top 等），它只会调整自身在行框内的位置，不会直接改变行框的基线——行框的基线依然由那些使用 baseline 对齐的元素（比如文本）决定
• 行框的高度会自动扩展，以包含所有行内元素的上下边缘，不管它们用什么对齐方式

备注：内容来源于stack exchange，提问作者Dasheng