CSS Length Units

What You’ll Learn

Length units define the size and spacing of elements in CSS. Understanding absolute vs relative units is essential for building layouts that look right on every screen.

Introduction

In CSS, length units are a key part of designing layouts and elements. Lengths define the size of properties such as width, height, margin, padding, font-size, and more. CSS supports a wide range of units, from absolute values like pixels to relative values like percentages and viewport units.

What Is CSS Length?

CSS length is a measure used to define the dimensions or spacing of an element. Length values control how elements render in relation to the document, their parent, or the viewport.

Types of CSS Length Units

CSS offers two main categories of length units:

• Absolute length units — Fixed sizes not affected by parent or viewport (e.g. px, cm, in).
• Relative length units — Sizes based on another value: parent size, font-size, root font-size, or viewport (e.g. %, em, rem, vw).

📝 Absolute Length Units

Absolute units represent a fixed length. Best when you need exact dimensions regardless of screen size. Common absolute units:

• px (pixels) — One CSS pixel on the screen. Most common for web design.
• cm (centimeters) — 1cm ≈ 37.8px in most browsers.
• mm (millimeters) — 1mm = 1/10 of a centimeter.
• in (inches) — 1in = 96px.
• pt (points) — Print unit; 1pt = 1/72 of an inch.
• pc (picas) — Print unit; 1pc = 12 points.

div {
  width: 300px;
  margin-left: 1in;
}

📝 Relative Length Units

Relative units scale with parent elements, font sizes, or the viewport. Essential for responsive design:

• % (percentage) — Relative to the parent container’s same property.
• em — Relative to the element’s font-size (or parent for some properties).
• rem — Relative to the root html element’s font-size.
• vw (viewport width) — 1vw = 1% of viewport width.
• vh (viewport height) — 1vh = 1% of viewport height.
• vmin / vmax — Relative to the smaller or larger viewport dimension.

.container {
  width: 80%;
  padding: 2em;
}

.box {
  height: 50vh;
}

📝 Using Length in CSS

Length units apply to many CSS properties:

• Width and height — Element dimensions.
• Padding and margin — Inner and outer spacing.
• Border width — Border thickness.
• Font-size — Text size (often rem or em).
• Gap — Space between grid or flex items.

div {
  width: 100px;
  height: 50vh;
  margin: 20px;
  padding: 1em;
}

When to Use Each Unit

• px — Hairline borders, shadows, icons, and when you need pixel-perfect control.
• % — Layout columns and elements that should fill a fraction of their parent.
• rem — Font sizes, margins, and padding for accessible, scalable typography.
• em — Component-internal spacing that scales with that component’s text.
• vw / vh — Full-viewport sections, hero banners, and responsive height panels.
• cm / in / pt — Print stylesheets; rarely used for screen layouts.

Examples Gallery

Practice absolute px units, relative % and em, rem with vh, and a mixed-units layout.

.box {
  width: 300px;
  height: 80px;
  background: #2563eb;
}

.container {
  width: 80%;
  padding: 2em;
  font-size: 16px;
}

html { font-size: 16px; }

h1 { font-size: 1.25rem; }

.panel {
  height: 30vh;
}

.box {
  width: 50%;
  height: 200px;
  margin: 2em;
  padding: 1rem;
}

💬 Usage Tips

• Set a root font-size — html { font-size: 16px; } or 100% makes rem math predictable.
• Use rem for typography — Users who zoom the page get properly scaled text.
• Pair % with max-width — width: 80%; max-width: 600px; prevents overly wide content.
• min-height with vh — Add min-height so small viewports don’t collapse panels.
• Be consistent — Pick a primary unit strategy per project (e.g. rem + %).

⚠️ Common Pitfalls

• Mixing units carelessly — Random px, em, and % without a plan causes inconsistent layouts.
• Fixed units only — Using only px for everything makes responsive design harder.
• % without parent size — Percentages need a defined parent; otherwise results can be zero or unexpected.
• em compounding — Nested em font-sizes multiply; prefer rem for global typography.
• 100vh on mobile — Mobile browsers may treat 100vh differently; test on real devices.

♿ Accessibility

• Respect user font settings — rem scales when users change browser default font size.
• Avoid tiny px text — Very small fixed font sizes block users who need larger text.
• Touch targets — Buttons and links need adequate padding (at least 44×44px recommended).
• Zoom-friendly layouts — Relative units help content reflow when users zoom to 200%.
• Line length — Use max-width with relative units for readable line lengths.

💡 Best Practices