In CSS, an em is a unit of length tied to the font size of the element it is used on. If a paragraph's text is 18px, then 1em inside that paragraph is 18px and 0.5em is 9px. It is a way of saying "size this relative to the text right here".
The name comes from old metal typesetting, where an em was roughly the width of a capital M in the typeface being set.
How em sizes are worked out
For most properties, such as padding, margin or width, em means the element's own computed font size. There is one twist: when you use em on the font-size property itself, it refers to the parent's font size, because the element's own size is the thing being decided. That rule is what causes compounding. Put a list set to 1.2em inside another list set to 1.2em, and the inner text ends up 1.44 times the base size, then 1.728 times at the third level.
The rem unit was added to CSS to give a relative size that skips this chain and always looks at the root.
Where em is the right choice
Em shines when something should stay in proportion to nearby text. A button with padding: 0.5em 1em keeps the same shape whether it is a small link in a footer or a large call to action, because the padding follows each button's own text size. Icons sized at 1em line up with the words next to them. Letter spacing in em adapts automatically when a heading is made larger.
Example: a plumber's site has a "Call now" button in the header at 14px text and the same component in the hero at 22px. Written with em padding, both look balanced without a second set of rules.
Does a small-business owner need to know this?
Only if you or your developer edit CSS directly. If a page builder generates your styles, it has already chosen units. It becomes useful when you notice text inside a nested area growing or shrinking unexpectedly: em compounding is the usual cause.
Common em mistakes
- Setting font sizes in em on nested elements. Lists, comments and menus inside menus are classic places where text balloons or shrinks level by level.
- Expecting em to mean 16px. It only equals 16px where the current font size happens to be 16px.
- Using em for page-wide layout widths. A container width in em changes whenever someone adjusts the font size on that container, which is rarely intended.
- Confusing the em dash and em unit. They share a typographic origin but have nothing to do with each other in CSS.
Related terms
- rem: the root-based alternative that avoids compounding.
- Pixel: the fixed unit em is usually compared with.
- Typography: where proportional spacing matters most.
- CSS: the stylesheet language that defines em.