CODEWITHSUNDEEP
vertical-alignmentcss
stilllife
stilllife

Reputation: 1806

Top vertical align in line-height (or vertical spacing without line-height)

I have a multi-line title side by side to an icon. I would like to keep the line-height of that title at about 1.6 . If I do so though, the text does not align on top because it stays vertically centered to the line. The result is that the top of the icon is not aligned with the top of the text. If I use line-height 1 the problem does not occur because the middle vertical alignment of a text in a line of the same size is the same as the top alignment.

You can see what I mean in this code pen.

Any idea?

Upvotes: 1

Views: 546

Answers (1)

Etheryte
Etheryte

Reputation: 25310

You can add a negative top margin to your title.
Defining both your font size and the margin in em will allow you to achieve alignment regardless of what font size is inherited.

Upvotes: 1

Related Questions