CSS - Relative Measurement Units


CSS - Relative Units

Relative length units determine a length with respect to another length property. The relative units are:

Percentage (%):

Characterizes an estimation as a percentage in respect to another value, regularly an insert component.

Example:

p {font-size: 16pt; line-height: 125%;}

em:

A relative estimation for the height of a font style in em spaces. Since an em unit is equal to the size of a given font style.(2em means 2 times the size of the current font) .

Example:

p {letter-spacing: 7em;}

ex:

A relative estimation for the height of a font style in em spaces.

Example:

p {letter-spacing: 7ex;}

vh:

With respect to 1% of the height of the viewport.

Example:

h2 { font-size: 3.0vh; }

vw:

With respect to 1% of the width of the viewport.

Example:

h1 { font-size: 5.9vw; }

vmin:

In respect to 1% of viewport's smaller measurement.

Example:

p { font-size: 2vmin;}

vmax:

In respect to 1% of viewport's lager measurement.

Example:

p { font-size: 2vmax;}