1

Here is my code:

div {
  border: thin solid gray;
  display: inline-block;
}
h1 {
  background: lightblue;
}
span {
  background: orange;
}
.b h1 {
  line-height: 1.2em;
}
.c span {
  font-size: 0.5em;
}
.d h1 {
  line-height: 1.2em;
}
.d span {
  font-size: 0.5em;
}
<div class="a"><h1>Foo<span>Bar</span></h2></div>
<div class="b"><h1>Foo<span>Bar</span></h2></div>
<div class="c"><h1>Foo<span>Bar</span></h2></div>
<div class="d"><h1>Foo<span>Bar</span></h2></div>

There are four divs. Each div has an h1 and a span nested in h1. Only the line-height and font-size styles are relevant for this question. The other styles are just for visualising the issue. Here is what to focus on,

  1. div.a is a normal div. There is no styling of line-height or font-size here.
  2. div.b only styles h1 to have line-height: 1.2.
  3. div.c only styles span to have font-size: small.
  4. div.d styles both h1 to have line-height: 1.2 and span to have font-size: small.

Why does the heading in div.d have a larger height than the others?

Lone Learner
  • 18,088
  • 20
  • 102
  • 200
  • the trick is that in the last example the span will inherit the line-height and the story begin there (read the duplicate for the full story) – Temani Afif Dec 31 '20 at 14:29
  • @TemaniAfif I am aware that `span` will inherit the `line-height` but that holds for `div.c` too. The default `line-height` for `h1` in the browser is `1.2` anyway, so even in `div.c`, the `span` inherits a `line-height` of `1.2` and thus becomes equivalent to `div.d`. Why doesn't `div.c` have a larger height like that of `div.d` then? – Lone Learner Dec 31 '20 at 14:32
  • `1.2` and `1.2em` aren't the same, explained here: https://stackoverflow.com/a/60109105/8620333 (the question explain using percetange but em behave like percentage) – Temani Afif Dec 31 '20 at 14:34
  • @TemaniAfif That was the issue! I was aware of the duplicate link but I completely overlooked that I used `1.2em` when I intended `1.2` actually. Knowing this, the issue is resolved now. Thank you for your help! – Lone Learner Dec 31 '20 at 14:36

0 Answers0