CSS Functions and Units

Absolute Units

px // pixels

cm // centimeters
mm // millimeters
in // inches
pt // points
pc // picas

Fixed lengths.

max()

width: max(unit, unit);

Set the largest number possible from a set of comma seperated list.

Relative Units

rem  // relative to the root element (use for fontsize, padding, margin)
%    // relative to the parent element (use for widths, heights, padding, margin, positioning)

em   // relative to the parent element
vw   // relative to 1% of the viewport width  
vh   // relative to 1% of the viewport height 
vmin // relative to 1% of the viewport's smaller dimension  
vmax // relative to 1% of the viewport's bigger dimension

Relative to another length. Better for responsiveness.

min()

width: min(unit, unit);

Set the smallest number possible from a set of comma seperated list.

calc()

width: calc(unit - unit);

Let's you perform calculations.

clamp()

width: clamp(min, val, max);

Takes three values. A minimum value, a preferred value, and the maximum value allowed.