CSS: line-height and vertical align

Reading notes of this brilliant post explaining line-height and vertical-align. Some information comes from my experiments.

Reference: mdn web docs of vertical-align

Font property ​

• em-square

  relative units, usually 1000 units. container.

• metric ascent, descent

  • ascent baseline to top
  • descent baseline to bottom

• metric line gap

  metric line gap + metric ascent + metric descent = line-height normal

• capital height, x height

Inline element height ​

• texts

  • content area height

    ascent + descent

    css background area = content area + padding

  • virtual-area height

    line-height

  virtual-area height - content-area height = leading

  Half of leading is added before top of content-area, and half after bottom. Therefore content-area is always on the middle of virtual-area.

• replaced inline, inline-block, inline-*

  content-area height

  virtual-area height: if text, then line-height; else content-area height

Line box ​

Height of line box is based on its children's virtual-area height, from highest to lowest

vertical-align ​

• baseline: baseline to parent baseline.

• text-top/text-bottom: virtual-area top/bottom to top/bottom of parent content-area

• middle: middle to (parent baseline + 0.5 * parent x-height)

• top/bottom: virtual-area top/bottom to top/bottom of parent line box

• <length>: relative to baseline

• <percentage>: relative to baseline. percentage of its line-height

For elements that do not have a baseline, the bottom margin edge is used instead.