CSSEasy
When do you use px, em, rem, %, vw/vh and ch?
By FrontendPro Editorial Team Updated 8/14/2026
#css#units#responsive
Answer
px: fixed - good for borders and shadows.em: relative to the element's ownfont-size(or the parent's when settingfont-size) → compounds when nested; handy for button padding that scales with the label.rem: relative to the root (html) → the best default for spacing/typography and it respects the user's browser font size.%: relative to the parent's size (which axis depends on the property).vw/vh/dvh: viewport-relative;dvhcopes with collapsing mobile address bars.ch: width of the0glyph - great for readable line length (max-width: 65ch).
css
html { font-size: 100%; } /* don't force 62.5% unless you know the trade-off */
.prose { max-width: 65ch; }