em
em is the acronym for Width of M.
Width of M
It’s not an acronym, but the em unit in CSS is rooted in traditional typography, where it originally referred to the width of the capital letter M in a given typeface. In metal typesetting, the M-square (or em-square) was a fundamental unit of measurement, roughly equal to the font’s point size. For instance, in a 12-point font, 1 em would be 12 points wide.
The name em itself likely emerged as a spoken and written adaptation of the letter M, much like how letters are sometimes pronounced as words (e.g., el for L). Since the letter M was often as wide as the font size, it became a convenient reference for defining scalable spacing and layout measurements.
em in Modern CSS
In digital typography and CSS, the em unit has evolved beyond its historical association with the letter M and now represents a value relative to an element’s font size. 1em is equal to the current font size of the element it applies to. If no font size is explicitly set, the default value is inherited from the parent element or the browser’s default (typically 16px).
For example, if an element’s font size is 16px, then:
- 1em = 16px
- 2em = 32px
This makes em a flexible unit that adjusts dynamically based on context, making it helpful in creating responsive designs.
Use Cases for em
- Typography: The em unit allows text to scale proportionally relative to its parent.
p { font-size: 1.2em; /* 1.2 times the parent element's font size */ } - Spacing and Layout: It can be used for margins, padding, and other spacing properties.
div { padding: 2em; /* Twice the font size of the element */ } - Nested Scaling Issues: Since em is relative to the parent element’s font size, deeply nested elements can sometimes compound unexpectedly, leading to larger-than-intended values.
Difference Between em and rem
While em is relative to the parent element’s font size, rem (root em) is always relative to the root <html> font size. This makes rem more predictable for maintaining consistent scaling across an entire website, whereas em is helpful for elements that need to scale dynamically within different contexts.