Relative Units: em and rem
Size elements relative to parent or root font sizes using em and rem units.
What are Relative Units?
Relative units scale based on another measurement — usually the font size of an element or the root. They enable scalable, responsive designs that respect user settings.
em — Relative to Parent Font Size
em is relative to the font-size of the current element (for font-size itself) or the parent element (for other properties). This can cause compounding.
.parent { font-size: 20px; }
.child { font-size: 1.5em; } /* 20 * 1.5 = 30px */
.grandchild { font-size: 1.5em; } /* 30 * 1.5 = 45px! */All lessons in this course
- Absolute Units: px pt cm
- Relative Units: em and rem
- Viewport Units: vw vh dvh
- Min Max and Clamp Functions