CSS Units

Choose suitable absolute, relative, viewport, and container units.

CSS units tell the browser how large or small an element should be. They are used with properties such as:

Width and height
Margin and padding
Font size
Border width
Top, right, bottom, and left

For example:

CSS

.box {
  width: 300px;
  padding: 20px;
}

CSS units are mainly divided into two groups:

Absolute units
Relative units

Absolute Units

Absolute units usually represent a fixed size. The most commonly used absolute unit is the pixel (px).

CSS

button {
  width: 120px;
  height: 40px;
}

In this example, the button has a fixed width of 120px and a height of 40px.

Common absolute units include:

px — pixels
cm — centimetres
mm — millimetres
in — inches
pt — points
pc — picas

Units such as cm, mm, and in are mainly useful for printed documents. For websites, px is much more common.

Use pixels for borders, icons, small gaps, and fixed-size design details.

CSS

.card {
  border: 2px solid blue;
  border-radius: 8px;
}

Percentage Unit

The percentage unit (%) creates a size relative to another value, usually the size of the parent element.

CSS

.container {
  width: 800px;
}

.content {
  width: 50%;
}

Here, .content uses half of its parent's width. Therefore, its width becomes 400px.

Percentages are useful for flexible page sections, responsive images, columns, and progress bars.

CSS

img {
  width: 100%;
}

This allows the image to use the full available width of its parent.

The em Unit

The em unit is relative to the font size of the current element. When used for font-size, it is calculated from the parent's font size.

CSS

.card {
  font-size: 16px;
}

.card h3 {
  font-size: 2em;
}

The heading becomes 32px because 2em is twice the parent's 16px font size.

em is also useful for spacing that should grow with the text:

CSS

button {
  font-size: 16px;
  padding: 0.5em 1em;
}

Be careful with deeply nested elements because em values can multiply.

The rem Unit

The rem unit means “root em.” It is calculated using the font size of the root <html> element.

CSS

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

The heading becomes 32px, regardless of its parent's font size.

rem is commonly used for font sizes, padding, margins, consistent spacing, and accessible layouts.

CSS

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

Unlike em, rem provides more predictable sizing across the page.

Viewport Width and Height Units

Viewport units are based on the visible browser area.

vw — one percent of the viewport width
vh — one percent of the viewport height

CSS

.hero {
  width: 100vw;
  min-height: 100vh;
}

This makes the hero section as wide and at least as tall as the browser viewport.

CSS

h1 {
  font-size: 5vw;
}

The text size changes as the viewport width changes. Use viewport units carefully because text may become too small or too large.

Small, Large, and Dynamic Viewport Units

Mobile browsers can change the visible page area when their address bar appears or disappears. Modern CSS provides additional viewport units:

svh — small viewport height
lvh — large viewport height
dvh — dynamic viewport height

CSS

.mobile-screen {
  min-height: 100dvh;
}

100dvh follows the currently visible viewport height, making it useful for full-screen mobile layouts.

Character-Based Units

The ch unit is based on the approximate width of the 0 character in the current font.

CSS

article {
  max-width: 65ch;
}

This limits a line to roughly 65 characters, helping long paragraphs remain readable.

The ex unit is based on the approximate height of the lowercase letter x, although it is less commonly used.