5

I'm reading CSS the definitive guide by Eric Meyer 3rd edition.

His section on font-sizes (page 107) states that font size determines the em box. If I do:

span { font-size: 10px; }

Does it set exactly the horizontal and the vertical of the em box to 10px? He refers to the measurement as being the distance between baselines.

I guess I'm a little confused on why it's referred to as a "box" instead of just em height if all it does is measure vertical distance.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
catphive
  • 3,511
  • 3
  • 31
  • 29

2 Answers2

2

Have a read of the Font size: the 'font-size' property of the W3C specification ..

The font size corresponds to the em square, a concept used in typography.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
2

"em" is available as a relative unit of measure in both vertical or horizontal measurements.

So if the current font-size is set to 12px, then setting margin:1em on a child element would create a 12px margin around it. If you were then to change the font-size of the parent element to 16px, the margin would also increase to 16px.

chprpipr
  • 2,039
  • 16
  • 17