An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS.
Läs och begrunda: Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira
What we learned (TL;DR):
- inline formatting context is really hard to understand
- all inline elements have 2 height:
- the content-area (based on font metrics)
- the virtual-area (
line-height) - none of these 2 heights can be visualize with no doubt. (if you’re a devtools developer and want to work on this, it could be awesome)
line-height: normalis based on font metricsline-height: nmay create a virtual-area smaller than content-areavertical-alignis not very reliable- a line-box’s height is computed based on its children’s
line-heightandvertical-alignproperties - we cannot easily get/set font metrics with CSS
- there is a related future spec to help with vertical alignment: the Line Grid module