Почему заголовок имеет большую высоту, если для него задана высота строки, а у него есть диапазон с меньшим шрифтом?

Вот мой код:

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>

Есть четыре div. Каждый div имеет h1 и span, вложенные в h1. К этому вопросу относятся только стили line-height и font-size. Другие стили предназначены только для визуализации проблемы. Вот на что обратить внимание,

1. div.a — обычный div. Здесь нет стиля line-height или font-size.
2. div.b только стили h1 имеют line-height: 1.2.
3. div.c только стили span имеют font-size: small.
4. div.d меняет стиль h1 на line-height: 1.2 и span на font-size: small.

Почему заголовок в div.d имеет большую высоту, чем остальные?