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.