CSS Units Explained: px, em, rem, vw, and More

Category: CSS Essentials | Published on: by Dr. Talib

Choosing the right CSS unit is fundamental to building websites that are both responsive and accessible. While pixels (px) are familiar to everyone, a world of relative units like rem, em, and vw offers far more flexibility. Understanding the difference is key to modern web development.

This guide will break down the most important CSS units and explain when you should use each one.

Absolute Units: Fixed and Unchanging

Absolute units are fixed and are not affected by other elements or the screen size. They are generally best for things that you want to remain a constant size.

Pixels (px)

The pixel is the most common absolute unit. One pixel (1px) is equal to one dot on the screen. Pixels are great for properties where you need precise, fixed control.

  • Best for: border-width, box-shadow offsets, or anything that needs a fine, hard-coded line.
  • Example: border: 1px solid black;

Relative Units: Flexible and Scalable

Relative units are calculated based on another value, such as the parent element's size, the root font size, or the viewport size. They are the cornerstone of responsive and accessible design.

Root EM (rem)

The rem unit is relative to the font size of the root element (the <html> tag). By default, this is 16px in most browsers. If the user changes their browser's default font size for better readability, everything sized in rem will scale accordingly. This makes rem the best choice for accessibility.

  • Best for: font-size, margin, padding, width—almost everything.
  • Example: If root font size is 16px, then font-size: 1.5rem; is 16 * 1.5 = 24px.
html {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1.25rem; /* 20px */
}

EM (em)

The em unit is relative to the font size of its direct parent element. This can be powerful but also tricky, as em values can compound on each other in nested elements, leading to unexpected results.

  • Best for: Sizing elements relative to a specific component's text, like the padding on a button or the width of an icon.
  • Example: If a <div> has font-size: 20px;, a child with padding: 0.5em; will have 10px of padding.

Rem vs. Em: For consistency across your entire site, use rem for global spacing and typography. Use em only when you specifically need an element's size to scale with its own font size, not the global one.

Viewport Width (vw) and Viewport Height (vh)

Viewport units are relative to the size of the browser window (the viewport). 1vw is 1% of the viewport's width, and 1vh is 1% of its height.

  • Best for: Creating full-screen sections or fluid typography that scales smoothly with the browser window.
  • Example: height: 100vh; will make an element exactly as tall as the browser window.
.hero-section {
  width: 100%;
  height: 100vh; /* Fills the entire screen height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section h1 {
  /* Font size will be 5% of the viewport width */
  font-size: 5vw;
}

Percentage (%)

The percentage unit is always relative to a property of its parent element. For example, width: 50%; makes an element half the width of its parent.

  • Best for: Layouts, such as creating columns within a container.
  • Example: Making a child div take up 75% of its parent's width.

Conclusion: Choosing the Right Unit

There's no single "best" unit—the right choice depends on the context. A modern, robust strategy often involves a mix of units:

  • rem for Typography and Spacing: Use for font-size, margin, and padding to create a consistent, scalable, and accessible design system.
  • px for Borders and Shadows: Use for fine details that should not scale, like a 1px border.
  • % for Layout Widths: Use for creating flexible grids and columns within a parent container.
  • vw/vh for Full-screen and Fluid Effects: Use for hero sections or typography that needs to adapt directly to the viewport.

By understanding and combining these units, you can build interfaces that look great on any device and respect user accessibility preferences.

Use our Live HTML Viewer to experiment with different CSS units and see how they behave!