Revealing experiments on content box height, vertical-align and line-height

div {border: green solid; font: 100px/normal Ahem;}
<div>X</div>:

X

div {border: green solid; font: 100px/1.2 Ahem;}
<div>X</div>:

X

div.with-image {border: green solid; font: 100px/1 Ahem;}
img#va-baseline {vertical-align: baseline;}

Image download support must be enabled

The height of an line box is determined by the inline box which has the uppermost box top. This is the case here. Even though the image has a height of 100px, it will make the line box reach a height of 120px because such image sits on the baseline.

div.with-image {border: green solid; font: 100px/1 Ahem;}
img#va-text-bottom {vertical-align: text-bottom;}

Image download support must be enabled

Here, the image sits at the bottom of content area. Because of this, the resulting line box height is 100px and not 120px.

div {border: green solid; font: 100px/normal serif;}:

ÉXpx

div {border: green solid; font: 100px/1.2 serif;}:

ÉXpx

div {border: green solid; font: 100px/1.5 serif;}:

ÉXpx