Units and Sizing

CSS offers absolute, font-relative, viewport, container, and percentage units. Choose the unit that matches the relationship you are expressing.

Match units to intent

01body { font-size: 1rem; }
02.article { max-width: 68ch; }
03.hero { min-height: 70svh; }
04.icon { width: 1.25em; height: 1.25em; }
05.card { padding: clamp(1rem, 4cqi, 2rem); }

Use rem for user-scalable system sizes, em for local relationships, ch for text measure, and small viewport units when mobile browser chrome matters. Container units respond to a query container.

Intrinsic sizing

01.button { width: fit-content; }
02.grid { grid-template-columns: max-content minmax(0, 1fr); }
03img { width: 100%; height: auto; }

min-content, max-content, and fit-content let content participate in sizing. Set min-width: 0 on flexible children that must shrink around long text.

Keep this

Use relative units for adaptable relationships, constrain line length, and let intrinsic sizing handle content before forcing dimensions.