Demystifying the CSS em Unit: A Step-by-Step Guide with Comparisons to rem and Pixels
CSS Units are used to define the dimensions or size of an HTML element. They are broadly categorised into two: absolute and relative units. Absolute units, as implied in the name, are total or independent. They do not rely on any style definition, that is, 10px remains 10px wherever it is defined. Pixels, points, centimeter, millimeter, and pica are all absolute units in CSS. Relative units, on the other hand, depend on external style definition, and in most cases, a style definition in the parent element. They are difficult to work with as they are less predictable. Em, rem, vh, vw, percentage, vmin, and vmax, among others, are CSS relative units, but of all the relative units mentioned, em is the most notorious. It is also the most common relative unit primarily used in typography.
The em unit is powerful yet misunderstood, and a good part of this article will be spent demystifying why it is both strong and confusing to developers.
What is the em unit?
em is a relative unit based on the parent element’s font size. For instance, a div of class .box with a font size of 14px and a padding of 1.2em has its padding equivalent to (1.2 x 14px).
.box {
font-size: 14px;
padding: 1.2em;
}
// The box div has an a rendered padding of 16.8px
What if the font-size of the element is declared in em and not px? Then, the font size of the parent element declared in px is used. If the parent element has a font size also not declared in px but em, the closest ancestor with a font size declared in px is used. Let’s see this code block for an illustration.
/* HTML */
<div class="parent-1">
<div class="parent-2">
<div class="box"></div>
</div>
</div>
// CSS
.parent-1 {
font-size: 16px;
padding: 1em;
}
.parent-2 {
font-size: 1.2em;
padding: 1em;
}
.box {
font-size: 1em;
padding: 1em;
}
https://codepen.io/drprime01/embed/bNGvOOB
https://codepen.io/drprime01/pen/bNGvOOB
The .parent-1 div has a font size of 16px and a padding of 1em, therefore, it has an equivalent padding of 16px. The .parent-2 div, which is a child of parent-1, has a font size of 1.2em. Since its font size is defined in em, its dependent on parent-1 for the equivalence of its font size in px. Converting the font size of 1.2em to px will give 19.2px (1.2 x 16). This font size px value will now be used to calculate its padding. The equivalence of .parent-2 padding is therefore 19.2px, calculated by multiplying the padding’s em value by the font size px equivalence. .box which is now a direct descendant of .parent-2 and has a font size defined in em will use parent-2's font size px equivalence as well. 19.2 x 1 equals 19.2px as .box's font size. Since its padding is 1em, the px equivalence will also be 19.2px.
Sounds confusing, right? Let’s change the value of .box font size and padding to 1.2em and 1.4em respectively.
.box {
font-size: 1.2em;
padding: 1.4em;
}
This time around, .box font size will be calculated by multiplying 1.2 by the font size px value of .parent-2, which is 19.2px. .box will now have a font size px value of 23.04px. By that conversion, its padding will also change to 1.4 x 23.04 to give 32.256px.
If an element’s font size px value changes, all the styles defined with em will change to adjust to the new value. Consequently, if the element uses em for its font size and the parent element uses px, once the parent element’s font size value changes, the element’s font size will change first, then other styles defined with em will follow suite, adjusting to the new px value of the element’s font size. For an element with an em value greater than 1, the px equivalence increases, but when the em value is less than 1, the developer runs into the shrinking font problem as defined in CSS in Depth, and might have to spend hours debugging and checking the browser’s developer’s console for where the issue is coming from.
The em unit is dynamic in nature and cascades and compounds through nested elements, making it a pain in the ass for developers who do not understand it. It can be a problem for you when you use it for width or height and cannot explain why your nested divs are larger than the value you defined, or shrinking. It is therefore advisable to limit the use of em in typography. What then is the better alternative to em? Let’s explore the CSS rem and pixel unit and compare them with em.
Comparing em with rem and Pixels
rem or root em is a relative of em but rather than being tied to the px value of the same element’s or parent element’s font size, it is totally dependent on the font size defined in the root styles.
:root {
font-size: 16px;
}
The CSS rem unit does not compound like em, making it more predictable. You can always calculate the rem value of a style respective to the root’s font size and expect it to be the same. Even when font size is not defined in the root, the default font size is 16px so rem can be calculated respective to 16px.
For the same HTML code block in the em section with nested divs and the .box div, when rem is used, the value changes.
// CSS
:root {
font-size: 14px;
}
.parent-1 {
font-size: 16px;
padding: 1rem;
}
.parent-2 {
font-size: 1.2rem;
padding: 1rem;
}
.box {
font-size: 1rem;
padding: 1em;
}
.parent-1 padding will be equivalent to 14px, not 16px as the case of em. .parent-2 font size will be (1.2 x 14) 16.8px while its padding will remain 14px. The .box div will also have a font size of 14px, while its padding, intentionally remained as em, will have a value of 14px. In this case, it is calculated by multiplying the 14px of the .box element’s font size after conversion and not the root element’s.
https://codepen.io/drprime01/embed/EaxEGGd
https://codepen.io/drprime01/pen/EaxEGGd
Pixels, px are CSS most used absolute unit and they maintain their value irrespective of what element’s font-size is changing.
.box {
font-size: 14px;
padding: 16px;
}
The .box div will always have a font size of 14px and a padding of 16px no matter what happens. The px unit is static and precise and does not entertain relativity.
Side-by-side comparison table:
| Unit | Relative to | Scales with parent | Predictability |
|---|
em | Parent font size | Yes | Contextual |
rem | Root font size | No | High |
px | Fixed (absolute) | No | Absolute |
When to Use em, rem, or Pixels
The CSS em unit shines where typography scales with components (e.g., buttons, headings in a card). It allows proportional scaling based on a parent’s size, making it ideal for modular designs. It is also good for spacing and container dimensions, except in situations where you want a fixed size.
.button {
font-size: 16px;
}
.button span {
font-size: 0.875em; /* 14px, scales with button */
}
rem works best for global typography or spacing (e.g., site-wide margins, font sizes). It is consistent across the website or app, respects user browser settings, avoids compounding issues.
:root {
font-size: 16px;
}
p {
font-size: 1.125rem; /* 18px, consistent everywhere */
}
For fine-tuned control (e.g., borders, icons, fixed layouts), use pixels. It provides precision where relativity is not needed, making it ideal for static designs.
.icon {
width: 24px;
height: 24px;
}
.border {
border: 1px solid black;
}
In summary, em shines in nested, relational designs but can be tricky to manage, rem simplifies scaling with a single reference point, while px is straightforward but less flexible for responsive designs.
Practical Tips for Working with em
The em unit can be a powerful ally in CSS, but its relative nature means it requires some care to use effectively. Here are some practical tips to help you harness its potential while avoiding common pitfalls.
- Avoid deep nesting to prevent unexpected compounding.
- Use browser dev tools to inspect computed values.
- Pair
em with a clear parent font size for predictability.
- Test across screen sizes to ensure scalability.
By keeping these tips in mind—limiting nesting, inspecting computed values, anchoring em to a clear parent size, and testing thoroughly—you will turn em from a source of confusion into a dependable tool for flexible, scalable designs.
Conclusion
The CSS em unit is a beautiful relative unit for styling your websites. Despite the confusion associated with its use, it stands out as the best, especially in responsive designs. You only need to understand how it works to tap into its full potential. Once you unlock it, there is no limit to what you can achieve with it. Whenever you are confused, always remember that em is relative to the parent, rem to the root, and px is absolute.
References
