Posted over 2 years ago. Visible to the public. Linked content.

CSS font metrics in detail

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height always the same or different? Is it really between 1 and 1.2? And vertical-align, what are its implications regarding line-height?

Deep dive into a not-so-simple CSS mechanism…

The article also explains and visualizes the intricacies of CSS's vertical-align.

Some take-aways

  • Each HTML element is actually a stack of line-boxes. If you know the height of each line-box, you know the height of an element.
  • Browsers do their computation as if each line-box starts with a zero-width character (that the spec calls a strut)
  • vertical-align:middle is never really “at the middle”
  • An inline element has two different heights: its "content height" and its "line height"

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 1 month ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more