0

In this pen below:

https://codepen.io/Fr1nge/pen/yLgXKvr

* {
  margin: 0;
  padding: 0;
  box-sizing:  inherit;
}


html {
  font-size: 62.5%;
  box-sizing:  border-box;
}

p {
  text-align: start;  
  font-size: 1.6rem;
  line-height: 1.6rem;
}

span {
  background-color: DimGray;
  border: 1px solid;
}


em {
  background-color: lavender;
  border: 1px solid;
  font-size: 3.6rem;
}

strong {
  background-color: Gainsboro;
  border: 1px solid;
}
<p><span>This is a span element</span><em>This is an em element</em><strong>This is a strong element</strong></p>

The em element has a font-size of 3.6 rem and a inherited line-height of 1.6rem, the difference of which will give a leading of -1rem both on top and bottom, accordingly the content area of the em element should have been 1.6rem which is same as other elements in the line box. But the content area of the em element is more than other elements, how is this? There is empty space on top and below the other 2 elements which makes them and hence the line box taller than 1.6rem.

TylerH
  • 20,799
  • 66
  • 75
  • 101
ChrisOdney
  • 6,066
  • 10
  • 38
  • 48
  • 1
    the content area doesn't depend on the line-height. You can apply `line-height: 0;` to `em` and the content area will remain the same. Related: https://stackoverflow.com/a/55978512/8620333 – Temani Afif Apr 06 '21 at 09:41
  • @TemaniAfif your answer to the linked question is very detailed and lucid. Another way to answer the linked question I think is the conflict between 'Glyph area' and 'em box'. The problem is not every font has a em box whose height accommodates the entire glyph area. Coming to my question, let me re-examine a few things in light of your comment, be back soon. – ChrisOdney Apr 06 '21 at 10:13
  • @TemaniAfif The linked question is not closely related to this one. For the question at hand, here is my understanding: Firstly, line-height comes into picture while forming the line box. A line box is formed by taking the lowest and highest inline box bounds on that line. In this case the lowest inline box bound is formed by the em element's inline box at it's baseline and the highest inline box bound is also formed by the em element's inline box though it's content area is clipped. I can't think of any other explanation, would love to hear your thoughts. – ChrisOdney Apr 06 '21 at 12:20
  • 1
    @ChrisOdney A line box consisting only of non-atomic inline boxes is formed by taking the highest top edge of the upper half-leading, and the lowest bottom edge of the lower half-leading of each box. The half-leadings are computed from the difference between the line-heights and the characteristic heights and depths of the font of each box (which may be taken from the top and bottom edges of the content area, but also might not be) and are applied to the top and bottom edges of the same characteristic height and depth to establish the position of the top and bottom edges of the half-leadings. – Alohci Apr 06 '21 at 13:36
  • @Alohci This is exactly my understanding as I posted the question. Going by this the line box should not have exceeded the 1.6rem in my example, taking into account the negative half leading on top as well as the bottom. But for some reason it doesn't look like that in this example. Would really appreciate if you can throw some light on this! – ChrisOdney Apr 06 '21 at 14:10
  • @ChrisOdney - OK I think I misunderstood your question. This is about that application of the half-leadings. The large text is 3.6rem which makes its characteristic height and depth about 2.9rem and 0.7rem respectively. The half leading is -1rem so the top edge of the upper half leading is 1.9em above the baseline and and bottom edge of the lower half leading is -0.3rem below the baseline (or if you prefer, 0.3rem _above_ the baseline). So the total line height is 1.9em above the baseline to the lower edge of the half leading of the _smaller_ text which is about 0.3rem below the baseline. – Alohci Apr 06 '21 at 15:07
  • See also https://stackoverflow.com/questions/52282391#52285183 – Alohci Apr 06 '21 at 15:27
  • Typos in my comment above. Where I wrote "1.9em", that should have said "1.9rem". – Alohci Apr 06 '21 at 17:45

1 Answers1

0

When your font size is not greater than p height, you get what you want. But when your font size is larger than the parent height, it will be higher than the parent height

you can test this here

Hossein Azizdokht
  • 748
  • 3
  • 17
  • I know that but that does not apply here as the height of the p is auto, it will stretch to the content of it's children. – ChrisOdney Apr 06 '21 at 08:02