Clarification what exactly CSS font-size measures

Question

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.

Answer 1

"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.

Answer 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.