8

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

Rosh_LK
  • 680
  • 1
  • 15
  • 36

3 Answers3

8

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.

m4n0
  • 29,823
  • 27
  • 76
  • 89
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.

Community
  • 1
  • 1
Panther
  • 3,312
  • 9
  • 27
  • 50
0

Although, there is a very slight difference between these but both these attributes of the "vertical-align" property may come very handy while some text formatting. You may understand it this way that : vertical-align property is self descriptive that is helps in aligning elements vertically with respect to the line box height. Now vertical-align:top , aligns the element’s top edge to the line box’s top edge. And whereas, the vertical-align:text-top aligns the element’s top edge to the line box’s text box top edge.

Ashwyn Joshi
  • 11
  • 3