CSS Units: Explained

CSS Units Explained

Every CSS unit: absolute, font-relative, viewport-relative, the fluid functions, and the angle, time, and resolution units, what each one is measured against and when to reach for it.

Absolute units (px, pt) hold a fixed size regardless of context; relative units (rem, vw, %) scale against a reference value. Prefer rem for font sizes: it respects the user's root font-size setting, so your typography honors their accessibility preference. Use clamp() for fluid typography that grows and shrinks with the viewport while never crossing a min or max bound.

Reference table · 38 entries

38 of 38 rows


Absolute
	1/96 inch (the CSS reference pixel).	Fixed UI sizing: borders, hairlines, icon dimensions.	border: 1px solid #000;
	1/72 inch (1pt = 1.333px).	Print stylesheets, where sizes map to physical paper.	font-size: 12pt;
	1 centimeter (≈37.8px).	Print layouts needing real-world measurements.	margin: 2cm;
	1 millimeter (≈3.78px).	Fine-grained print measurements.	padding: 5mm;
	1 inch (96px = 2.54cm).	Print layouts sized in inches.	margin: 1in;
Font-relative
	The element's own font-size (inherited from its parent).	Spacing that scales together with the surrounding text.	padding: 1em;
	The root element's font-size (the html element).	Font sizes: it honors the user's root font-size setting.	font-size: 1.25rem;
	The advance width of the '0' glyph in the current font.	Set a readable line length (characters per line).	max-width: 70ch;
	The x-height of the current font (height of lowercase 'x').	Vertical metrics tied to the typeface.	line-height: 2ex;
	The cap height of the current font (height of a capital letter).	Vertical metrics sized to capitals, tighter than ex.	padding-top: 0.5cap;
	The advance width of the '水' (water) ideograph in the current font.	Sizing that tracks one CJK character cell.	width: 4ic;
	The element's own computed line-height.	Size elements in whole lines of text.	height: 3lh;
	The root element's line-height.	Spacing in multiples of the document's base line height.	margin-block: 2rlh;
Viewport-relative
	The parent's value of the same property.	Fluid layouts sized to the containing element.	width: 50%;
	1% of the viewport width.	Full-bleed sections sized to the screen width.	width: 100vw;
	1% of the viewport height.	Hero sections or overlays spanning the screen height.	height: 100vh;
	1% of the smaller viewport dimension.	Size elements to fit the screen in any orientation.	font-size: 5vmin;
	1% of the larger viewport dimension.	Fill the dominant axis of the viewport.	font-size: 5vmax;
	1% of the small viewport height (browser UI fully shown).	Mobile full-height sections that fit above expanded browser chrome.	height: 100svh;
	1% of the large viewport height (browser UI hidden).	Backdrops that must cover the screen even as browser chrome collapses.	height: 100lvh;
	1% of the dynamic viewport height, tracking browser UI as it shows and hides.	The mobile fix for 100vh: the height resizes as browser chrome appears.	height: 100dvh;
	1% of the small viewport width.	Width counterpart of svh for the narrowest viewport state.	width: 100svw;
	1% of the large viewport width.	Width counterpart of lvh for the widest viewport state.	width: 100lvw;
	1% of the dynamic viewport width, tracking browser UI.	Width counterpart of dvh when the viewport resizes with chrome.	width: 100dvw;
	1% of the viewport size along the inline axis (width in horizontal writing modes).	Viewport sizing that follows the writing direction.	width: 50vi;
	1% of the viewport size along the block axis (height in horizontal writing modes).	Viewport sizing that stays correct in vertical writing modes.	height: 50vb;
Fluid
	A preferred value bounded by a min and a max.	Fluid typography that never crosses a min or max bound.	width: clamp(320px, 80vw, 1100px);
	The smallest of its comma-separated arguments.	Cap a size so it never exceeds a maximum.	width: min(100%, 600px);
	The largest of its comma-separated arguments.	Enforce a minimum size that grows with the viewport.	width: max(50%, 300px);
Angle
	1/360 of a full circle.	Rotation transforms and gradient angle positions.	transform: rotate(45deg);
	Radians; 1rad ≈ 57.2958deg.	Angles computed from math, such as generated transforms.	transform: rotate(1.5708rad);
	Gradians; 400grad = a full circle.	Legacy or surveying-style angle values.	transform: rotate(100grad);
	1turn = one full 360° circle.	Full or half rotations that read at a glance.	transform: rotate(0.5turn);
Time
	One second.	Animation and transition durations.	transition: opacity 0.3s;
	One millisecond (1s = 1000ms).	Short UI feedback animations and delays.	animation-duration: 150ms;
Resolution
	Dots per inch of output.	Print-targeted resolution media queries.	@media (min-resolution: 300dpi)
	Dots per px unit; 1dppx equals a standard 96dpi display.	Retina and high-DPI media queries.	@media (min-resolution: 2x)
	Dots per centimeter (1dppx ≈ 2.54dpcm).	Resolution media queries in metric units.	@media (min-resolution: 118dpcm)