Understanding minimum value computation of line-height with replaced inline element

Asked Oct 04 '21 at 10:43

Active Oct 04 '21 at 11:00

Viewed 54 times

I need to understand how the height of the div is computed in the following cases :

<div id="div20" style="font-family:Arial; font-size:50px;line-height:16px;">
  <img width="5" height="5">
</div>

On my computer, with chromium, the result is 25 (same as FF).

<div id="div30" style="font-family:Arial; font-size:30px;line-height:16px;">
  <span style="font-size:10px">TEXT</span>
</div>

On my computer, with chromium, the result is 23 (same as FF).

edited Oct 04 '21 at 11:00

Temani Afif

asked Oct 04 '21 at 10:43

Philippe Roux

First, both have a complete different calculation so you don't compare between them. I will grab a duplicate for each case – Temani Afif Oct 04 '21 at 11:02
here is the explanation for the second case: https://stackoverflow.com/q/21570239/8620333 – Temani Afif Oct 04 '21 at 19:30

0 Answers0