CSS-eenheden uitgelegd

Elke CSS-eenheid: absolute, lettertypegerelateerde en viewportgerelateerde eenheden, de vloeiende functies, en de eenheden voor hoeken, tijd en resolutie — waar elke eenheid op is gebaseerd en wanneer je hem gebruikt.

Absolute eenheden (px, pt) houden een vaste grootte, ongeacht de context; relatieve eenheden (rem, vw, %) schalen mee met een referentiewaarde. Gebruik bij voorkeur rem voor lettergroottes: rem respecteert de root-lettergrootte-instelling van de gebruiker, zodat je typografie hun toegankelijkheidsvoorkeur volgt. Gebruik clamp() voor vloeiende typografie die meegroeit en meekrimpt met de viewport zonder ooit een onder- of bovengrens te overschrijden.

Referentietabel · 38 eenheden

38 of 38 rows


Absoluut
	1/96 inch (de CSS-referentiepixel).	Vaste UI-afmetingen: randen, haarlijnen, icoonmaten.	border: 1px solid #000;
	1/72 inch (1pt = 1.333px).	Printstylesheets, waar afmetingen overeenkomen met fysiek papier.	font-size: 12pt;
	1 centimeter (≈37.8px).	Printlayouts die metingen uit de echte wereld nodig hebben.	margin: 2cm;
	1 millimeter (≈3.78px).	Fijnmazige printmaten.	padding: 5mm;
	1 inch (96px = 2.54cm).	Printlayouts met afmetingen in inches.	margin: 1in;
Lettertyperelatief
	De eigen fontgrootte van het element (geërfd van de ouder).	Tussenruimte die meeschaalt met de omringende tekst.	padding: 1em;
	De fontgrootte van het root-element (het html-element).	Lettergroottes: rem respecteert de root-lettergrootte-instelling van de gebruiker.	font-size: 1.25rem;
	De voorloophreedte van de '0'-glyph in het huidige lettertype.	Stel een leesbare regellengte in (tekens per regel).	max-width: 70ch;
	De x-hoogte van het huidige lettertype (hoogte van een kleine 'x').	Verticale maten die aan het lettertype gekoppeld zijn.	line-height: 2ex;
	De cap-hoogte van het huidige lettertype (hoogte van een hoofdletter).	Verticale maten afgestemd op hoofdletters, krapper dan ex.	padding-top: 0.5cap;
	De voorloophreedte van het ideogram '水' (water) in het huidige lettertype.	Afmetingen die één CJK-tekencel volgen.	width: 4ic;
	De berekende regelhoogte van het element zelf.	Elementen afmeten in hele tekstregels.	height: 3lh;
	De regelhoogte van het root-element.	Tussenruimte in veelvouden van de basisregelhoogte van het document.	margin-block: 2rlh;
Viewportrelatief
	De waarde van dezelfde eigenschap op de ouder.	Vloeiende layouts die op het bevattende element zijn afgestemd.	width: 50%;
	1% van de viewportbreedte.	Full-bleedsecties op schermbreedte.	width: 100vw;
	1% van de viewporthoogte.	Herosecties of overlays die de schermhoogte overspannen.	height: 100vh;
	1% van de kleinste viewportafmeting.	Elementen afmeten zodat ze in elke oriëntatie op het scherm passen.	font-size: 5vmin;
	1% van de grootste viewportafmeting.	De dominante as van de viewport vullen.	font-size: 5vmax;
	1% van de kleine viewporthoogte (browser-ui volledig zichtbaar).	Mobiele secties op volle hoogte die boven uitgeklapte browser-ui passen.	height: 100svh;
	1% van de grote viewporthoogte (browser-ui verborgen).	Achtergronden die het scherm moeten bedekken, zelfs als browser-ui inklapt.	height: 100lvh;
	1% van de dynamische viewporthoogte, die de browser-ui volgt wanneer die verschijnt en verdwijnt.	De mobiele oplossing voor 100vh: de hoogte past zich aan wanneer browser-ui verschijnt.	height: 100dvh;
	1% van de kleine viewportbreedte.	Breedte-tegenhanger van svh voor de smalste viewporttoestand.	width: 100svw;
	1% van de grote viewportbreedte.	Breedte-tegenhanger van lvh voor de breedste viewporttoestand.	width: 100lvw;
	1% van de dynamische viewportbreedte, die de browser-ui volgt.	Breedte-tegenhanger van dvh wanneer de viewport van formaat verandert met de ui.	width: 100dvw;
	1% van de viewportgrootte langs de inline-as (breedte in horizontale schrijfrichtingen).	Viewportmaten die de schrijfrichting volgen.	width: 50vi;
	1% van de viewportgrootte langs de block-as (hoogte in horizontale schrijfrichtingen).	Viewportmaten die ook in verticale schrijfrichtingen kloppen.	height: 50vb;
Vloeiend
	Een voorkeurswaarde begrensd door een minimum en een maximum.	Vloeiende typografie die nooit een onder- of bovengrens overschrijdt.	width: clamp(320px, 80vw, 1100px);
	De kleinste van de kommagescheiden argumenten.	Een afmeting begrenzen zodat deze nooit een maximum overschrijdt.	width: min(100%, 600px);
	De grootste van de kommagescheiden argumenten.	Een minimum afdwingen dat meegroeit met de viewport.	width: max(50%, 300px);
Hoek
	1/360 van een volledige cirkel.	Rotatietransformaties en hoekposities in gradients.	transform: rotate(45deg);
	Radialen; 1rad ≈ 57.2958deg.	Hoeken die uit wiskunde komen, zoals gegenereerde transformaties.	transform: rotate(1.5708rad);
	Gradianten; 400grad = een volledige cirkel.	Verouderde of landmeetkundige hoekwaarden.	transform: rotate(100grad);
	1turn = één volledige cirkel van 360°.	Volledige of halve omwentelingen die in één oogopslag leesbaar zijn.	transform: rotate(0.5turn);
Tijd
	Eén seconde.	Duur van animaties en transities.	transition: opacity 0.3s;
	Eén milliseconde (1s = 1000ms).	Korte ui-feedbackanimaties en vertragingen.	animation-duration: 150ms;
Resolutie
	Dots per inch van de uitvoer.	Resolutiemediaqueries gericht op print.	@media (min-resolution: 300dpi)
	Dots per px-eenheid; 1dppx is gelijk aan een standaardscherm van 96dpi.	Retina- en high-DPI-mediaqueries.	@media (min-resolution: 2x)
	Dots per centimeter (1dppx ≈ 2.54dpcm).	Resolutiemediaqueries in metrische eenheden.	@media (min-resolution: 118dpcm)