CSS Relative Units

CSS Relative Units

CSS relative units calculate sizes in relation to another value, such as a parent element, the root font size, or the viewport. They help create layouts and typography that can adapt to different screen sizes and design conditions.

Common relative units include percentages, em, rem, and viewport units such as vw and vh. Choosing the appropriate unit depends on what you want the value to respond to.

Absolute vs Relative Units

CSS supports both absolute and relative length units. An absolute unit represents a fixed relationship to a physical or reference measurement, while a relative unit is calculated in relation to another value.

.fixed {
  width: 300px;
}
.relative {
  width: 80%;
}

The first element requests a width of 300 CSS pixels. The second uses 80 percent of the relevant containing block width, so its used width can change when the available space changes.

Relative units are especially useful in responsive design because they allow dimensions, spacing, and typography to respond to their surrounding context.

Percentage Units

Percentage values are calculated relative to another value determined by the property being used.

.content {
  width: 80%;
}

For the width property, the percentage is generally calculated relative to the width of the element's containing block.

Percentages are useful for flexible containers because the element can grow or shrink as the available space changes.

.image {
  width: 100%;
  max-width: 600px;
}

This allows the element to use the available width while preventing it from becoming wider than 600 pixels.

The em Unit

The em unit is relative to a font size. For the font-size property itself, an em value is calculated from the parent element's font size. For many other properties, it is calculated from the element's own computed font size.

.card {
  font-size: 16px;
  padding: 1em;
}

In this example, 1em of padding equals 16 pixels because the card's computed font size is 16 pixels.

If the card's font size changes, its em-based padding changes with it. This can be useful when spacing should scale with the text inside a component.

The rem Unit

The rem unit is relative to the font size of the root <html> element.

html {
  font-size: 16px;
}
.heading {
  font-size: 2rem;
}

With a root font size of 16 pixels, 2rem computes to 32 pixels.

Because rem values use the root font size instead of a local parent font size, they provide a consistent reference for sizing throughout a document.

em vs rem

The em and rem values are the same, but they are calculated differently. An em value is relative to the font size of its parent element, while a rem value is relative to the root <html> element. Because these relative units depend on a base font size, you can adjust the base value when calculating sizes for your website or responsive design project.

.parent {
  font-size: 20px;
}
.em-text {
  font-size: 1.5em;
}
.rem-text {
  font-size: 1.5rem;
}

If the parent has a 20-pixel font size, the em-based text becomes 30 pixels. If the root font size is 16 pixels, the rem-based text becomes 24 pixels.

This difference makes em useful when a component should scale relative to its local text size, while rem is useful when sizes should share a consistent document-wide reference.

Viewport Units

Viewport units calculate lengths from the dimensions of the viewport. They were introduced on the Viewport tutorial and can also be useful when creating responsive dimensions and typography.

.hero {
  min-height: 60vh;
}
.banner {
  padding: 3vw;
}

Viewport units respond directly to changes in viewport dimensions rather than to the size of a parent element.

Modern Viewport Units

Modern CSS includes small, large, and dynamic viewport units. These help account for mobile browser interface elements that can change the visible viewport area.

.screen {
  min-height: 100dvh;
}

The dynamic viewport units can change as browser interface elements expand or retract. Small and large viewport units provide stable sizes based on the corresponding viewport states.

Relative Units for Typography

Relative units allow typography to relate to a base font size instead of assigning an unrelated pixel value to every text element.

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}
p {
  font-size: 1rem;
}

The heading is twice the root font size, while the paragraph uses the root font size.

Relative units can also be combined with CSS functions when fluid typography is appropriate.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

The heading can grow with the viewport while remaining between the specified minimum and maximum sizes.

Relative Units for Layout

Relative units are useful for containers, spacing, and other layout dimensions.

.content {
  width: 90%;
  padding: 2rem;
}

The width responds to the containing block, while the padding is based on the root font size.

Different relative units can be combined because each can respond to a different part of the design. The goal is not to use relative units everywhere, but to choose units that produce the intended relationship.

Combining Relative and Fixed Limits

Responsive designs often combine flexible relative sizing with minimum or maximum constraints.

.content {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

The container can shrink to 90 percent of the available width on smaller screens but stops growing when it reaches 1200 pixels.

This approach provides flexibility without allowing an element to become excessively wide or narrow.

.card {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
}

Here the card combines a percentage width, a pixel maximum, and root-relative padding.

Choosing a Relative Unit

Choose a unit according to the relationship you want to create.

Pixels remain useful when a particular CSS pixel measurement is appropriate. Responsive design usually uses a combination of relative units, fixed values, constraints, and CSS functions rather than relying on one unit for every situation.

CSS Relative Units Example

The following example combines percentage, rem, and em values in one responsive component.

.card {
  width: 80%;
  max-width: 600px;
  padding: 2rem;
  font-size: 1rem;
}
.card h2 {
  font-size: 2em;
}

The card width responds to its containing block, the padding uses the root font size, and the heading size responds to the card's font size.

Open the example in the editor and change the percentage, rem, and em values. Drag the divider between the code and result panes to change the preview width and see how the layout responds.