div {border: green solid; font: 100px/normal Ahem;}
:
<div>X</div>
div {border: green solid; font: 100px/1.2 Ahem;}
:
<div>X</div>
div.with-image {border: green solid; font: 100px/1 Ahem;}
img#va-baseline {vertical-align: baseline;}
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;}
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;}
:
div {border: green solid; font: 100px/1.2 serif;}
:
div {border: green solid; font: 100px/1.5 serif;}
: