# CSS Units Cheatsheet — Every Unit Explained > All CSS units explained with use cases: absolute units (px, pt, cm), relative units (em, rem, vw, vh, %), and when to use each one for responsive design. - URL: https://www.browserutils.dev/cheatsheets/css-units - Published: 2026-03-21 - Updated: 2026-03-16 --- CSS offers a variety of units for sizing elements, spacing, and typography. Choosing the right unit affects accessibility, responsiveness, and maintenance. This reference covers every CSS unit with guidance on when each one is the best choice. ## Absolute Units Absolute units have a fixed size regardless of context. In practice, `px` is the only absolute unit used for screen-based design. | Unit | Name | Equivalent | Use case | |------|------|-----------|----------| | `px` | Pixels | 1/96 of an inch | Borders, shadows, fine-grained control | | `pt` | Points | 1/72 of an inch | Print stylesheets | | `pc` | Picas | 12 points | Print stylesheets | | `in` | Inches | 96 pixels | Print stylesheets | | `cm` | Centimeters | ~37.8 pixels | Print stylesheets | | `mm` | Millimeters | ~3.78 pixels | Print stylesheets | | `Q` | Quarter-millimeters | 0.25mm | Print stylesheets (rare) | **When to use `px`**: Borders (`border: 1px solid`), box shadows, and any element where you need exact pixel-level precision. Avoid `px` for font sizes and spacing that should scale with user preferences. ## Relative Units — Font-based These units scale relative to a font size, making them ideal for building proportional, accessible layouts. | Unit | Relative to | Example | |------|-------------|---------| | `em` | Font size of the current element | `padding: 1.5em` (1.5x the element's font size) | | `rem` | Font size of the root element (``) | `font-size: 1.125rem` (18px if root is 16px) | | `ex` | x-height of the current font | Rarely used; roughly half the `em` | | `ch` | Width of the "0" (zero) character | `max-width: 65ch` for readable line lengths | | `cap` | Height of capital letters | Experimental; limited support | | `ic` | Width of the CJK "water" ideograph | CJK typography | | `lh` | Line height of the element | Useful for vertical rhythm | | `rlh` | Line height of the root element | Vertical rhythm relative to root | ### em vs rem | | `em` | `rem` | |-|------|-------| | **Relative to** | Parent element's font size | Root `` font size | | **Compounds** | Yes (nested elements multiply) | No (always relative to root) | | **Best for** | Component-internal spacing | Global sizing, font sizes, layout spacing | | **Gotcha** | `1.5em` inside a `1.5em` = `2.25em` | Always predictable | ```css /* rem for font sizes — predictable scaling */ h1 { font-size: 2rem; } /* 32px at default 16px root */ h2 { font-size: 1.5rem; } /* 24px */ body { font-size: 1rem; } /* 16px */ /* em for component-internal spacing — scales with the component */ .button { font-size: 1rem; padding: 0.5em 1em; /* scales if font-size changes */ } ``` ## Relative Units — Viewport Viewport units are relative to the browser window dimensions. | Unit | Relative to | Example | |------|-------------|---------| | `vw` | 1% of viewport width | `width: 50vw` (half the screen width) | | `vh` | 1% of viewport height | `height: 100vh` (full screen height) | | `vmin` | 1% of the smaller dimension | Useful for elements that should fit in any orientation | | `vmax` | 1% of the larger dimension | Less common | | `dvw` | 1% of dynamic viewport width | Accounts for mobile browser chrome | | `dvh` | 1% of dynamic viewport height | Accounts for mobile address bar showing/hiding | | `svw` | 1% of small viewport width | Smallest possible viewport | | `svh` | 1% of small viewport height | With all browser UI visible | | `lvw` | 1% of large viewport width | Largest possible viewport | | `lvh` | 1% of large viewport height | With browser UI hidden | **The mobile viewport problem**: On mobile browsers, `100vh` can be taller than the visible area because the address bar is part of the viewport calculation. Use `100dvh` for full-height layouts that account for the dynamic browser chrome, or `100svh` for the safe minimum height. ```css /* Full-height hero that works on mobile */ .hero { min-height: 100dvh; /* dynamic viewport height */ } /* Fallback for older browsers */ .hero { min-height: 100vh; min-height: 100dvh; } ``` ## Percentage (%) Percentages are relative to the parent element's corresponding property. | Context | Relative to | |---------|-------------| | `width: 50%` | Parent's width | | `height: 50%` | Parent's height (parent must have explicit height) | | `padding: 10%` | Parent's **width** (even for top/bottom padding) | | `margin: 10%` | Parent's **width** (even for top/bottom margin) | | `font-size: 120%` | Parent's font size | | `line-height: 150%` | Element's own font size | | `transform: translateX(50%)` | Element's own width | The fact that vertical `padding` and `margin` percentages are based on the parent's **width** (not height) is one of CSS's most surprising behaviors. This quirk is actually useful for creating aspect ratios: ```css /* 16:9 aspect ratio using padding trick (pre-aspect-ratio) */ .video-wrapper { position: relative; padding-bottom: 56.25%; /* 9/16 = 0.5625 */ } /* Modern approach */ .video-wrapper { aspect-ratio: 16 / 9; } ``` ## Container Query Units These units are relative to a query container's dimensions, enabling component-level responsive design. | Unit | Relative to | |------|-------------| | `cqw` | 1% of container's width | | `cqh` | 1% of container's height | | `cqi` | 1% of container's inline size | | `cqb` | 1% of container's block size | | `cqmin` | Smaller of `cqi` or `cqb` | | `cqmax` | Larger of `cqi` or `cqb` | ```css .card-container { container-type: inline-size; } .card-title { font-size: clamp(1rem, 4cqi, 2rem); } ``` ## The clamp() Function `clamp()` lets you set a responsive value with minimum and maximum bounds. It works with any unit. ```css /* Fluid typography */ font-size: clamp(1rem, 2.5vw, 2rem); /* min preferred max */ /* Fluid spacing */ padding: clamp(1rem, 3vw, 3rem); /* Fluid width */ width: clamp(300px, 50%, 800px); ``` ## Quick Reference: Which Unit When? | Property | Recommended Unit | Why | |----------|-----------------|-----| | Font size | `rem` | Respects user preferences, predictable | | Line height | Unitless number (e.g., `1.5`) | Scales proportionally with font size | | Padding/margin | `rem` or `em` | Scales with text size | | Width | `%`, `vw`, or `ch` | Responsive to container or viewport | | Max-width | `ch` or `rem` | `65ch` for readable prose | | Height | `dvh` or `auto` | Avoid fixed heights when possible | | Borders | `px` | Fine-grained control needed | | Box shadows | `px` | Fine-grained control needed | | Media queries | `em` | Consistent across zoom levels | | Border radius | `px` or `%` | `px` for subtle, `%` for circles | Convert between px and rem with the [px to rem Converter](/tools/px-to-rem-converter), or explore all units in the [CSS Units Reference](/tools/css-units-reference).