CSS Measurement Units

CSS Measurement Units

CSS Backgrounds
CSS Borders

In CSS, size matters. Whether you are setting the width of a button, the size of a font, or the spacing between sections, you need to use Measurement Units. These units are divided into two main categories: Absolute and Relative.

1. Absolute Units

Absolute units are fixed. A size defined in absolute units will appear as exactly that size, regardless of the screen size or settings. These are generally not recommended for responsive layouts but are useful for print media.

UnitNameDescription
pxPixelsThe most common unit. 1px = 1/96th of an inch.
cmCentimetersStandard physical centimeters.
mmMillimetersStandard physical millimeters.
inInches1 inch = 96px = 2.54cm.
ptPoints1 point = 1/72nd of an inch (commonly used in print).
QQuarter-millimeters1Q = 1/40th of 1cm
pcpicas1pc = 1/6th of 1in

Example Code

p {
  font-size: 40px; /* Fixed size on all screens */
  margin-bottom: 2cm;
}

Output

Paragraph 40px

2. Relative Units

Relative units calculate size based on another value, such as the parent element’s font size or the size of the browser window (viewport). These are essential for modern, responsive web design.

A. Font-Relative Units

  • em: Relative to the font-size of the element itself. (If font-size is 16px, 2em = 32px).
  • rem: Relative to the Root (the <html> element) font-size. This is much more predictable than em.
  • ch: Relative to the width of the “0” character in the current font.

B. Viewport-Relative Units

  • vw: Viewport Width. 1vw is equal to 1% of the width of the browser window.
  • vh: Viewport Height. 1vh is equal to 1% of the height of the browser window.
  • vmin / vmax: Relative to the smaller or larger dimension of the viewport.

C. Percentage

  • %: Relative to the parent element’s size.
UnitDescriptionExample
emRelative to the font-size of the element.font-size: 6em;
remRelative to font-size of the root element.font-size: 6rem;
chRelative to width of the “0”.font-size: 6ch;
exRelative to the x-height of the current font.font-size: 4ex;
lhIt is relative to the line height of the element.font-size: 6lh;
rlhIt is relative to the line height of the root element.font-size: 6vh;
vwIt is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.width: 6vw;
vhIt is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.font-size: 6vh;
vminIt is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport’s smaller dimension.width: 6vmin;
vmaxIt is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport’s larger dimension.width: 6vmax;
vbIt is relative to the size of the initial containing block in the direction of the root element’s block axis. 1vb = 1% of containing block’s size (block axis).font-size: 6vb;
viIt is relative to the size of the initial containing block in the direction of the root element’s inline axis. 1vb = 1% of containing block’s size (inline axis).font-size: 6vi;
svw, svhIt is relative to the size of the initial containing block in the direction of the root element’s inline axis. 1vb = 1% of containing block’s size (inline axis).width: 40svw;
height: 40svh;
lvw, lvhIt is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport’s width and 1lvh = 1% or 1/100 of the larger viewport’s height.width: 40lvw;
height: 40lvh;
dvw, dvhIt is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport’s width and 1dvh = 1% or 1/100 of the dynamic viewport’s height.width: 40dvw;
height: 40dvh;

Example Code

.r-container {
  width: 80%;       /* 80% of the parent element */
  padding: 2rem;    /* Based on root font size (usually 16px * 2) */
}

.r-hero-text {
  font-size: 5vw;   /* Text gets bigger on wider screens */
}

Output

Output Text

3. When to Use Which Unit?

  • Use px for borders or elements that should stay a constant size (like a logo).
  • Use rem for font sizes and spacing to ensure accessibility (it respects user browser settings).
  • Use % or vw/vh for layout widths and heights to ensure the site fills the screen correctly on mobile and desktop.
CSS Backgrounds
CSS Borders