Syntax
value: Npx | N% | Nem | Nrem;Examples
The Compounding Problem with em
Why em can produce unexpected results when nested.
.parent { font-size: 20px; }
.child { font-size: 1.5em; } /* 30px - relative to parent's 20px */
.grandchild { font-size: 1.5em; } /* 45px! - relative to child's 30px, compounds */rem Avoids Compounding
rem is always relative to the root, regardless of nesting depth.
html { font-size: 16px; } /* the reference point for ALL rem values */
.deeply-nested-element {
font-size: 1.5rem; /* always 24px, no matter how deeply nested */
padding: 1rem; /* always 16px */
}Parameters and values
- px (absolute): Fixed pixel size, does not scale with user font preferences
- % (relative): Relative to the parent element's corresponding value
- em (relative): Relative to the current element's font-size, compounds when nested
- rem (relative): Relative to the root html element's font-size, does not compound
Best practices
- Use rem for font-size and most spacing, so everything scales correctly if a user changes their browser's base font size for accessibility
- Use em specifically when you want a value to scale with its own element's font-size, like padding inside a button that should grow with its text
- Avoid px for font-size specifically, since it ignores user accessibility preferences for text scaling
- Use % for widths within a fluid, responsive container, but be aware % for font-size and most other properties refers to the parent, which can be less predictable than rem
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Viewport Units: vh, vw, dvh
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.Logical Properties
Logical properties describe direction in terms of writing mode (inline/block flow) rather than fixed physical directions (left/right/top/bottom). margin-inline-start behaves like margin-left in English but automatically adapts for right-to-left languages, making them essential for properly internationalized layouts.
Viewport units are relative to the browser window's dimensions rather than a parent element. vh and vw represent 1% of the viewport height and width respectively. The newer dvh (dynamic viewport height) solves the classic mobile browser problem where vh included space later covered by the address bar.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.Logical Properties
Logical properties describe direction in terms of writing mode (inline/block flow) rather than fixed physical directions (left/right/top/bottom). margin-inline-start behaves like margin-left in English but automatically adapts for right-to-left languages, making them essential for properly internationalized layouts.