❓ Frequently Asked Questions
❓ What is the difference between px, rem, and em?
px (pixels) is absolute — 1px equals one screen pixel. rem is relative to the root element's font size (usually 1rem = 16px browser default). em is relative to the current element's font size. em can cascade unpredictably in nested elements.
❓ When should I use rem vs em?
Use rem for font sizes and spacing as it only depends on root font size. Use em for component-scale elements like button padding. Use px for borders, shadows, and fine details. Use vw/vh for full-screen layouts and responsive designs.
❓ How are vw and vh calculated?
1vw = 1% of viewport width. 1vh = 1% of viewport height. For a 1200px viewport, 10vw = 120px. Note: mobile browsers may include address bar in 100vh — use dvh (dynamic viewport height) as alternative.
❓ What is the browser default font size?
Most browsers default to 16px (configurable in settings). This equals 1rem by default. Using rem units respects user font size preferences for better accessibility.
❓ When to use pt, cm, mm in CSS?
pt (points, 1pt = 1/72 inch) is for print stylesheets. cm, mm, in are physical units mainly for @media print queries. On screens, actual sizes depend on screen DPI/PPI.