Quote:
Originally Posted by Jellby
1 em is a font measure. You can think of it as "the width of the letter M" (although that's most of the time not exact).
|
For horizontal measurement, 1em always equals the width of the "m" in the current font at the current font size. You can see this is true by using a hanging indent of 1em and start the paragraph with "m".
For vertical measurement, 1em always equals "the height of the current font at the current font size". This creates a bit of chicken and egg because at some point the "current font size" needs to have an initial value. This is supplied by the renderer, and most default to 16px. As we know, "px" is a flexible unit, so this isn't the same on all devices.
Note that a
margin-top of 1em will create a space above the element that is less than the height of a line of text. Text lines have a
line-height property, with the default being the recommended line spacing metric that is stored inside the font file.