What the heck is an “em?
You would be forgiven for thinking that an “em” is equal to the width of the character m, or perhaps the character M. That is one historical meaning for the term, but it’s not what “em” means in common use today and it’s definitely not what “em” means in CSS. The best explanation of “em” comes from traditional print typography. Imagine a series of type blocks (stamps), one for each character in the complete font. To make sure that characters line up on a common baseline, all of these type blocks are of the same height— tall enough to accommodate the characters with the highest ascent above and the lowest descent below the baseline (think of the accent on
