CODEWITHSUNDEEP
cssfonts
catphive
catphive

Reputation: 3541

Clarification what exactly CSS font-size measures

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.

Upvotes: 5

Views: 369

Answers (2)

chprpipr
chprpipr

Reputation: 2039

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

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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.

Upvotes: 2

Related Questions