Styling & CSS · CSS basics
CSS Units
Also called: CSS length units, px vs rem, Viewport units
Units for length. Common ones are fixed pixels (px), rem and em that follow font size, vw and vh that scale with the window, and percentages.
In detail
Common units fall into two groups. The absolute unit px has a fixed size, and is common for borders, shadows, and small icons. Then there are relative units. rem is relative to the root font size (16px by default, so 1rem = 16px). It's good for font sizes and spacing, and scales up when users enlarge the browser font size. em is relative to the current font size, and stacks up when nested several levels deep. % is relative to the parent element. vw and vh are relative to the browser window, and 1vw is 1% of the window width.
On phones, a full-screen height of 100vh can get partly covered by the browser's address bar. Use 100dvh instead, which adjusts as the address bar shows and hides.
A common combination: rem for font sizes and spacing (Tailwind's default scale is in rem), px for borders, percentages or fr for layout widths, and dvh for full-screen sections.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-units- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026