css - 用什么？ "vertical-align:top"或 "vertical-align:text-top"

Question

这两个属性是一样的还是有不同的用法？vertical-align:top 和 vertical-align:text-top

Answer 1

区别可以通过line-height属性来解释。

MDN Source

text-top Aligns the top of the element with the top of the parent element's font.

top Align the top of the element and its descendants with the top of the entire line.

.top {
  line-height: 5em;
}

.text-top {
  line-height: 5em;
}

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

<div class="top">I am vertical-align: <span>top</span>
</div>
<div class="text-top">I am vertical-align: <span>text-top</span>
</div>

注意在上面的示例中，当文本顶部要放在文本上方时，文本顶部位于文本下方。

这是因为我们设置了line-height: 5em。 em 是相对于字体大小的。根据定义，text-top 将与父元素 (.text-top) 的基线对齐。