用什么？ ＆＃34;垂直对齐：顶部＆＃34;或＆＃34; vertical-align：text-top＆＃34;

Question

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

Answer 1

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

MDN Source

  

文字顶       将元素的顶部与父元素的字体顶部对齐。

     

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

.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与font-size相关。根据定义，text-top将与父元素（ .text-top ）的基线对齐。

Answer 2

  

vertical-align：top： - 这将使元素的顶部与最高元素的顶部对齐。

     

vertical-align：text-top： - 这会将元素的顶部与父元素的字体顶部对齐

大多数情况几乎相同，因为你有相同的字体和文字。当您的线条包含图像和文字等其他元素时，它会产生不同的影响，即使图像高于文字但text-top将对齐，此方案tallest text也会使您的元素与top对齐它与top of image或who ever is tallest in line whether text or image。

Answer 3

虽然这些但是这两个属性之间存在非常小的差异，而且＃34; vertical-align＆＃34;某些文本格式化时，属性可能会非常方便。您可以通过以下方式理解： vertical-align 属性是自描述的，有助于将元素 垂直对齐线框高度 。现在 vertical-align：top ，将元素的上边缘与线框的上边缘对齐。 然而， vertical-align：text-top 将元素的上边缘与线框的文本框上边缘对齐。