CSS Units & Functions

Common units for fixed measurements and typography-aware sizing.

Term / Syntax	Name	Description	Example
px	CSS Pixel	A fixed CSS reference unit useful for fine details and borders.	border-width: 1px;
rem	Root-em Unit	Relative to the root element's font size.	padding: 1.5rem;
em	Element-Relative Unit	Relative to the current element's computed font size for most properties.	margin-top: 1em;
ch	Character Measure	Approximately the advance width of the 0 glyph in the current font.	max-width: 65ch;
lh	Line-Height Unit	Relative to the element's computed line-height.	margin-block: 1lh;

Units tied to parent dimensions, grid space, or proportions.

Term / Syntax	Name	Description	Example
%	Percentage	Resolves against a property-specific reference size.	width: 80%;
fr	Grid Fraction	Allocates a fraction of remaining space in CSS Grid.	grid-template-columns: 1fr 2fr;

Units that respond to viewport or query-container dimensions.

Term / Syntax	Name	Description	Example
vw	Viewport Width	Represents 1% of the viewport width.	padding-inline: 4vw;
vh	Viewport Height	Represents 1% of the default viewport height.	min-height: 100vh;
dvw	Dynamic Viewport Width	Tracks the dynamic viewport width as browser UI expands or retracts.	width: 100dvw;
dvh	Dynamic Viewport Height	Tracks the dynamic viewport height as browser UI expands or retracts.	min-height: 100dvh;
svh	Small Viewport Height	Uses the smaller viewport size, useful for avoiding UI overlap.	min-height: 100svh;
cqi	Container Inline Size	Represents 1% of the query container's inline size.	font-size: 5cqi;

Functions that combine or constrain values.

Term / Syntax	Name	Description	Example
calc()	Calculate Value	Performs arithmetic using compatible CSS values.	width: calc(100% - 2rem);
min()	Minimum Value	Uses the smallest calculated argument.	width: min(70rem, 92%);
max()	Maximum Value	Uses the largest calculated argument.	padding-inline: max(1rem, 3vw);
clamp()	Bounded Fluid Value	Constrains a preferred value between a minimum and maximum.	font-size: clamp(1rem, 2vw, 1.5rem);