CSS中text-bottom的含义及vertical-align的text-bottom与bottom区别

嘿，这个问题问得很到位！我来给你把这两个vertical-align取值的区别讲明白，先从text-bottom的含义说起～

vertical-align: text-bottom的作用是让元素的底部，对齐到父元素文本内容的底部边界。这里的“文本底部”不是随便指什么，而是父元素里内联文本的基线下方的「下沉区域」——比如像字母g、y、q这类带下垂部分的字符，它们的最底端就是这个区域的边界。简单说，它是和父元素的文本排版绑定的，跟容器的整体高度没关系。

我从两个关键维度给你区分：

• 对齐基准完全不同
  • text-bottom：盯着父元素的文本走，对齐的是文本内容本身的底部，哪怕父元素的行高设置得很大，它也只会跟着文本的位置走，不会贴到容器最下面。
  • bottom：对齐的是元素所在的行框（line box）的底部，也就是整个这一行的最低边界。不管文本在什么位置，只要行框有高度，它就会乖乖贴到行框的最底端。
• 适用场景不一样
  • text-bottom适合需要和文本视觉上紧密贴合的场景，比如小图标和文字搭配时，用它能让图标和文字的底部对齐，看起来更协调。
  • bottom则适合需要让元素贴住行框底部的场景，比如在一个行高很大的容器里，让某个内联元素（比如装饰性小元素）对齐到整行的最下方。

看这段代码你就能一眼明白：

.parent {
  font-size: 24px;
  line-height: 60px; /* 行高远大于字号，行框高度是60px */
  border: 1px solid #ddd;
  margin: 20px 0;
}
.icon-text-bottom {
  vertical-align: text-bottom;
  width: 22px;
  height: 22px;
  background: #2196F3;
  display: inline-block;
}
.icon-bottom {
  vertical-align: bottom;
  width: 22px;
  height: 22px;
  background: #F44336;
  display: inline-block;
}

<div class="parent">
  测试文本（带g的下沉） <span class="icon-text-bottom"></span>
</div>
<div class="parent">
  测试文本（带g的下沉） <span class="icon-bottom"></span>
</div>

在这个例子里，蓝色图标会跟着文本的底部（也就是字母g的最底端）对齐，而红色图标会直接贴到整个行框的最底部，因为行高是60px，所以它的位置会比蓝色图标更靠下。

内容的提问来源于stack exchange，提问作者Parmenides