Skip to content
Learning

CSS Units

CSS units define measurements and are used for various properties like width, height, margin, padding, font-size, and more. CSS supports both absolute and relative units.

Absolute Units

Absolute units are fixed and don’t change based on other elements.

  1. px (pixels): A single dot on the screen, relative to the resolution.
width: 200px;
  1. pt (points): 1 point = 1/72 of an inch.
font-size: 12pt;
  1. cm (centimeters): For specifying measurements in centimeters.
margin: 2cm;
css
  1. mm (millimeters): For measurements in millimeters.
padding: 10mm;
  1. n (inches): 1 inch = 96 pixels.
width: 3in;
  1. pc (picas): 1 pica = 12 points.
font-size: 1pc;

Relative Units

Relative units are flexible and relative to other measurements.

  1. % (percentage): Relative to the parent element.
width: 50%;
  1. em: Relative to the font-size of the parent element.
padding: 2em; /* Twice the size of the current font */
  1. rem (root em): Relative to the font-size of the root element (html).
font-size: 1.5rem; /* 1.5 times the root font-size */
  1. vw (viewport width): 1% of the width of the viewport.
width: 50vw; /* 50% of the viewport width */
  1. vh (viewport height): 1% of the height of the viewport.
height: 100vh; /* 100% of the viewport height */
  1. vmin: 1% of the viewport’s smaller dimension (width or height).
font-size: 5vmin;
  1. vmax: 1% of the viewport’s larger dimension.
width: 10vmax;
  1. ex: Relative to the x-height of the current font (height of lowercase ‘x’).
font-size: 2ex;
  1. ch: Relative to the width of the “0” (zero) character in the current font.
width: 20ch;