When Your CSS Units Go Horribly Wrong
Description
A screenshot of a tweet from user Pouya (@Saadeghi). The text of the tweet reads, 'When you write 5em instead of 5px'. Below the text is an image of a woman on what appears to be a TV show, evidenced by logos for the Russian channel NTV in the bottom left and a purple 'Special Edition' graphic in the top right. The woman has extremely large, thick, blocky, black eyebrows drawn on her face, creating a comical and unnatural look. The humor lies in the analogy to a common frontend development mistake. In CSS, '5px' is a small, fixed size, while '5em' is a relative unit equal to five times the current font size. If the font size is 16px, 5em becomes 80px, a massive difference. The woman's oversized eyebrows serve as a perfect visual representation of the disastrous result of accidentally using 'em' instead of 'px' for a small UI element
Comments
7Comment deleted
The junior dev writes 5em instead of 5px. The senior dev uses a design token that a junior dev changes to 5em in the theme file, breaking the entire component library in one commit
Mistype 5em for 5px and watch the badge swell to 80px - frontend’s reminder that “relative units” are basically distributed systems with typography
The difference between 5em and 5px is about the same as the difference between 'minor styling adjustment' in the commit message and the 47 broken viewports in production that somehow passed QA because everyone tested on the same screen resolution
The classic 'em' vs 'px' mistake - where your carefully crafted 5-pixel border suddenly inherits from a parent with font-size: 32px and becomes a 160-pixel monstrosity. It's the CSS equivalent of forgetting to normalize your units before production, except instead of breaking the layout, you've just given every element on the page eyebrows that would make Frida Kahlo jealous. Senior devs know: always check your computed styles, because relative units are like pointers in C - powerful when used correctly, catastrophic when you forget what they're actually referencing
5em instead of 5px: inheritance turns padding into recursion and your CTA into a billboard - this is why rem is adult supervision
Em units: inheriting font sins from parent selectors until your 'subtle' padding rivals a billboard
Type 5em instead of 5px and padding scales with the parent font-size; three nested components later you’ve implemented exponential growth - use rem with clamp() unless you collect horizontal scrollbars