What to use? "vertical-align: top" or "vertical-align: text-top"
The difference can be explained using the property line-height
.
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 children 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>
Note that in the above example, the text on top is above the text when it should be placed above it.
This is because we set line-height: 5em . em
refers to the font size. And by definition text-top
will be aligned with the original base (.text-top).
source to share
vertical-align: top: - This will align the top of the element with the top of the tallest element.
vertical-align: text-top: - This will align the top of the element to the top of the parent element's font
Most scripts are pretty much the same since you have the same font and text on the line. This will have a different effect if there are other elements in your line, such as an image along with text, this script will text-top
align your element with tallest text
even if the image is above text, but top
align with top of image
or who ever is tallest in line whether text or image
.
source to share
While there is very little difference between the two, both attributes of the vertical-align property can be useful when formatting text. You can understand it this way: the vertical-align property is self-descriptive, which helps to align elements vertically with respect to the line-height of the line . Now vertical-align: top , aligns the top of the elements with the top of the window. And while vertical-align: text-top aligns the top edge of the elements with the top edge of the line's text box.
source to share