0

Shouldn’t vertical-align be changing where the text appears (relative to line-height)? It seems to just stays the same as its default (which I believe in baseline)

<div style="margin: 0;">
  I sit ontop.
</div>
<span style="line-height: 100px; vertical-align: top;">I am a span.</span>
<div style="margin: 0;">
  I sit below.
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
rfrostr
  • 91
  • 7
  • from the duplicate: https://stackoverflow.com/a/54190413/8620333 – Temani Afif May 16 '20 at 22:58
  • ^ you will probably need time to read the following and also follow the different links to get a full explanation. a TL;DR, vertical-align align the element based on the line box where it sit BUT here the span is setting the linebox so there is no room for alignment, if you apply the alignment to text inside it, it will work: https://jsfiddle.net/ong8ehkw/ – Temani Afif May 16 '20 at 23:05
  • another important factor is that line-height is inherited so it won't work if you only move the vertical align to a child element because it will also inherit the line-height and we fall again in the first issue – Temani Afif May 16 '20 at 23:06
  • another related question: https://stackoverflow.com/a/54342051/8620333 – Temani Afif May 16 '20 at 23:16

0 Answers0