What to use? "vertical-align:top" or "vertical-align:text-top"

Question

Are these two attribute does the same or is it got different usages? vertical-align:top and vertical-align:text-top

Answer 1

The difference can be explained through line-height property.

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>

Notice in the above example, the text-top is below the text when it is to be placed above it.

It is because we have set line-height: 5em. em is relative to the font-size. And as per the definition the text-top will be aligned to the parent element(.text-top)'s baseline.

Answer 2

vertical-align:top :- This will align the top of element with the top of tallest element.

vertical-align:text-top :- This will align the top of element the top of the parent element's font

Most of the scenarios is almost same , as you have same font and text in line. It will have different impact when your line has some other elements like image along with text, this scenario text-top will align your element with tallest text even if image is taller than text but top will align it with top of image or who ever is tallest in line whether text or image.