Units in CSS

Units in CSS define the size of things. Every time you set width, height, margin, padding, font size, gap, border radius, line height, or position offset, you are usually choosing a unit. The unit tells the browser how to interpret the number. A value like 20 alone is usually incomplete. A value like 20px, 2rem, 50%, or 100vh has meaning.

Choosing the right CSS unit is not only a syntax decision. It affects responsiveness, accessibility, maintainability, and layout behavior. A fixed pixel value may be perfect for a border. A relative unit may be better for text spacing. A viewport unit may be useful for full-screen sections. A percentage may be useful when an element should respond to its parent.

Absolute and Relative Units

CSS units are often grouped as absolute units and relative units. Absolute units are fixed in meaning. Relative units depend on something else, such as the font size, parent size, root size, viewport size, or grid track.

Category	Examples	Common Use
Absolute units	px, in, cm, mm, pt, pc	Precise fixed sizing
Font-relative units	em, rem, ch, ex	Typography and spacing
Percentage units	%	Parent-based sizing
Viewport units	vw, vh, vmin, vmax	Screen-based sizing
Grid unit	fr	CSS Grid track distribution

In web design, px, %, em, rem, vw, vh, ch, and fr are used far more often than physical units like centimeters or inches.

Pixels in CSS

The pixel unit px is the most familiar CSS unit. It represents a CSS pixel, not always a physical device pixel. Modern screens can have high pixel density, and browsers map CSS pixels to device pixels internally.

.button {
  padding: 12px 20px;
  border-radius: 6px;
}

Pixels are useful for borders, small spacing, icon sizes, shadows, and precise UI details. They are not always ideal for font sizes and large layouts because fixed values may not adapt well across different user settings and screens.

Percentages in CSS

The percentage unit % is relative to another value. For width, it is usually relative to the containing block. For transforms, it can be relative to the element itself. For line-height and some other properties, the behavior depends on the property.

.container {
  width: 80%;
}

.image {
  width: 100%;
}

Percentages are useful for fluid layouts. A container with width: 80% grows and shrinks with its parent. An image with width: 100% can fill the available width without overflowing.

em Unit

The em unit is relative to the font size of the current element. If an element has a font size of 20px, then 1em equals 20px for that element.

.box {
  font-size: 20px;
  padding: 1em;
}

In this example, the padding becomes 20px because 1em is based on the element font size. The em unit is useful when spacing should scale with the text size of a component.

One thing to watch carefully is compounding. If nested elements use em for font size, each level may multiply based on its parent. This can produce unexpectedly large or small text.

rem Unit

The rem unit is relative to the root element font size, usually the html element. If the root font size is 16px, then 1rem equals 16px.

html {
  font-size: 16px;
}

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

The rem unit is popular because it gives consistent scaling across the page. It also respects user font settings better than hardcoded pixel systems when used thoughtfully. Many modern design systems use rem for spacing and typography.

em vs rem

Unit	Relative To	Best Use
em	Current element font size	Component spacing that should follow local text size
rem	Root font size	Consistent site-wide typography and spacing
px	CSS pixel	Borders, exact details, small fixed values

Use rem when you want predictable site-wide sizing. Use em when the size should depend on the component text size. Use px when you need precise small values.

Viewport Units

Viewport units are relative to the browser viewport. 1vw is 1 percent of the viewport width. 1vh is 1 percent of the viewport height. vmin uses the smaller side, and vmax uses the larger side.

.hero {
  min-height: 100vh;
}

.title {
  font-size: 5vw;
}

Viewport units are useful for full-height sections and fluid visual effects. However, using pure viewport units for font sizes can make text too small on narrow screens or too large on wide screens. Modern CSS often combines viewport units with clamp() for safer fluid sizing.

ch Unit

The ch unit is based on the width of the “0” character in the current font. It is useful for controlling readable line length.

.article {
  max-width: 70ch;
}

This means the article width is roughly limited to a comfortable number of characters per line. It is not exact for every character, but it is useful for content readability.

fr Unit in CSS Grid

The fr unit is used in CSS Grid. It represents a fraction of the available space in a grid container.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

Here, the second column receives twice as much available space as the first column. The fr unit is not a general unit for all CSS properties. It belongs to grid track sizing.

Unitless Values

Some CSS properties can use unitless values. The most common example is line-height. A unitless line height is often recommended because it scales naturally with the font size of each element.

body {
  font-size: 18px;
  line-height: 1.6;
}

In this example, line height becomes 1.6 times the font size. If a child element has a larger font size, its line height scales proportionally. This is usually better than setting a fixed pixel line height for all text.

Using calc() with Units

The calc() function lets CSS combine different units in one value. This is useful when a size depends on both a fixed amount and a flexible amount.

.content {
  width: calc(100% - 40px);
}

.sidebar-layout {
  grid-template-columns: 280px calc(100% - 280px);
}

The first rule makes the content 40px smaller than the available parent width. This is useful when you need a flexible layout with a fixed amount of reserved space. The browser performs the calculation after it understands the parent size.

Using clamp() for Fluid Sizing

The clamp() function is extremely useful for modern responsive CSS. It accepts a minimum value, a preferred value, and a maximum value. The browser chooses a value within that range.

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

This heading can grow with the viewport because of 5vw, but it will not become smaller than 2rem or larger than 4rem. This solves a common problem with pure viewport-based text, where the text can become too small or too large.

min(), max(), and Unit Decisions

CSS also provides min() and max(). These functions help choose between values. For example, width: min(100%, 900px) means the element should be no wider than 900px but should shrink if the available space is smaller.

.wrapper {
  width: min(100%, 900px);
  margin-inline: auto;
}

This is a clean pattern for centered content wrappers. It avoids fixed-width overflow while still limiting line length on large screens.

Container Query Units

Modern CSS also includes container query units such as cqw, cqh, cqi, cqb, cqmin, and cqmax. These units are based on the size of a query container instead of the full viewport. They are useful when a component should respond to the space available inside its parent.

.card-title {
  font-size: clamp(1.25rem, 5cqw, 2rem);
}

This can be better than viewport units for reusable components because the component may appear in a narrow sidebar on desktop or a wide area on mobile. Container-based sizing follows the component context more closely.

Zero Values and Units

In CSS, zero usually does not need a unit. Values like margin: 0 and padding: 0 are preferred over 0px. Since zero is the same size in every unit, the unit adds no useful information.

* {
  margin: 0;
  padding: 0;
}

The exception is when a function or syntax specifically expects a typed value, but for normal length properties, unitless zero is standard and clean.

This small habit keeps CSS cleaner and avoids mixing unnecessary units in reset rules.

Units and Accessibility

Units affect accessibility because users may change browser zoom, default font size, or device settings. Layouts that depend too much on fixed values can become difficult to use when text grows. Relative units such as rem, flexible widths, and sensible maximum widths usually create more resilient pages.

Choosing the Right CSS Unit

• Use px for borders, tiny details, and exact UI values.
• Use rem for consistent typography and spacing systems.
• Use em when spacing should scale with local text size.
• Use % for parent-relative widths and fluid elements.
• Use vw and vh for viewport-based sections or effects.
• Use ch for readable content width.
• Use fr inside CSS Grid layouts.

Common CSS Unit Mistakes

• Using fixed widths everywhere and breaking mobile layouts.
• Using vh without testing mobile browser address bars.
• Using em for nested font sizes and getting unexpected compounding.
• Using percentages without understanding the parent size.
• Using pure vw font sizes that become unreadable.
• Adding units where CSS expects a unitless number.

Units in CSS FAQ

What is the best unit for font size in CSS?

rem is a strong default for consistent typography, while em is useful when text should scale based on a component. Pixels are also valid but less flexible for scalable systems.

What is the difference between em and rem?

em is relative to the current element font size. rem is relative to the root element font size.

Can width use rem?

Yes. Width can use rem, px, %, vw, ch, and other length units depending on the layout goal.

Should I avoid px completely?

No. Pixels are still useful for borders, shadows, small spacing, and precise interface details. The key is using them intentionally.

---