使用什么？“垂直对齐：顶部”或“垂直对齐：文本顶部”

Question

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

Answer 1

差异可以通过line-height属性来解释。

MDN来源

text-top 将元素的顶部与父元素的字体的顶部对齐。

top 将元素的顶部及其后代与整个行的顶部对齐。

.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）的基线对齐。