CSS Units for Layout (px, %, rem, em, vh/vw)

Analogy categoryAnalogies

Introduction

CSS layout properties accept length values expressed in different units, which fall into two broad categories: absolute units like px, which are fixed regardless of context, and relative units like %, em, rem, vh, and vw, which scale based on some reference — a parent element, the root font size, or the viewport. Choosing the right unit affects how well a layout adapts to different screens, zoom levels, and accessibility settings.

🏏

Cricket analogy: px is like a fixed boundary rope distance marked in meters regardless of ground size, while % and rem are like a bowler's run-up measured relative to the pitch length or the umpire's reference stride, adapting to context.

Syntax

css

:root {
  font-size: 16px; /* default root font-size, base for rem */
}

.box {
  width: 320px;        /* absolute pixels */
  padding: 2%;         /* relative to parent's width */
  font-size: 1.25rem;   /* relative to root <html> font-size */
  line-height: 1.5em;   /* relative to this element's own font-size */
  min-height: 40vh;     /* 40% of viewport height */
  max-width: 90vw;      /* 90% of viewport width */
}

Explanation

px is an absolute, fixed-size unit — a 20px box stays 20px regardless of surrounding context, which makes it predictable but rigid, especially for text that should scale with user font-size preferences. % is relative to the parent element's corresponding dimension (e.g. width percentages relate to the parent's width; for height, the parent needs an explicit height). em is relative to the current element's own font-size, which means it compounds when nested (an em value on a child of a child can multiply unexpectedly). rem (root em) is always relative to the root <html> element's font-size, avoiding the compounding problem of em and making it the preferred unit for consistent, scalable typography and spacing. vh and vw are relative to 1% of the viewport's height and width respectively, making them useful for full-screen sections (height: 100vh) or responsive typography.

🏏

Cricket analogy: px is like a fixed boundary distance that never changes; % is like a fielder's position relative to the pitch center; em compounds like nested field restrictions during powerplay overs; rem is like always measuring from the fixed stumps, avoiding drift; vh/vw are like sizing the stadium screen to the ground's dimensions.

Example

css

html { font-size: 16px; }

.hero {
  height: 100vh;
  padding: 2rem 5vw;
}

.card-title {
  font-size: 1.5rem;   /* 24px, scales if root font-size changes */
}

.card-title .badge {
  font-size: 0.75em;   /* 75% of card-title's computed font-size */
}

Output

The .hero section always fills the exact viewport height and gets horizontal padding proportional to viewport width. If a user increases their browser's default font size for accessibility, .card-title (in rem) scales proportionally, while .badge (in em, nested inside it) scales relative to the already-scaled title, compounding both changes together.

🏏

Cricket analogy: The .hero section filling the exact viewport height is like a stadium's giant screen always filling the full display regardless of ground size, and .card-title in rem scaling with accessibility settings while .badge in em compounds further is like a nested fielding restriction stacking on top of the main powerplay rule.

A common convention: use rem for font-size and consistent spacing (margin/padding), % or fr (in grid) for fluid container widths, vh/vw for viewport-relative sizing like hero sections, and px sparingly for things that truly should never scale, like a 1px border.

Key Takeaways

px is absolute and fixed; % , em, rem, vh, vw are all relative units.
% is relative to the parent element's corresponding dimension.
em is relative to the element's own font-size and compounds when nested.
rem is relative to the root html font-size, avoiding compounding — ideal for consistent typography.
vh/vw are relative to 1% of the viewport height/width, useful for full-screen or fluid sections.