css - text-bottom 是什么意思？

Question

有没有人告诉我如何区分 CSS 中“veritical-align”的“text-bottom”和“bottom”。非常感谢。

Answer 1

如果包含显式的 height 和 line-height 会更明显。 text-bottom 将匹配文本的底部，而 bottom 将匹配元素的底部。

div {
   display: inline-block;
   font-family: "Arial";
   background-color: blue;
   height: 100px;
   line-height: 80px;
}
    		
#left .px100 {
   font-size: 100px;
}
    		
#left .px50 {
   font-size: 50px;
   vertical-align: text-bottom;
}
    		
#right .px100 {
   font-size: 100px;
}
    		
#right .px50 {
   font-size: 50px;
   vertical-align: bottom;
}

<div id="left">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>
<div id="right">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>