What Are Percentage Values?

Percentages in CSS are relative units — their actual size depends on something else. Unlike pixels (which are always the same size), a percentage value calculates its size based on a reference value, usually the parent element.

CSS

.child {
  width: 50%; /* 50% of parent's width */
}

Understanding what percentages are relative to is essential for building responsive layouts.

Width Percentages

Width percentages are relative to the parent element's content width:

CSS

.parent {
  width: 800px;
}

.child {
  width: 50%; /* 400px */
}

.grandchild {
  width: 50%; /* 200px (50% of child, which is 400px) */
}

Common Width Patterns

CSS

/* Full width */
.full { width: 100%; }

/* Half width columns */
.half { width: 50%; }

/* Third width columns */
.third { width: 33.333%; }

/* Quarter width columns */
.quarter { width: 25%; }

/* Responsive container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Height Percentages (The Tricky Part)

Height percentages work differently — they're relative to the parent's explicit height. If the parent has no defined height, percentage heights are ignored:

CSS

/* This WON'T work */
.parent {
  /* No height defined */
}
.child {
  height: 50%; /* Ignored! Falls back to auto */
}

/* This WILL work */
.parent {
  height: 400px; /* Explicit height */
}
.child {
  height: 50%; /* 200px */
}

Making Percentage Heights Work

CSS

/* Method 1: Explicit pixel height on parent */
.parent {
  height: 600px;
}
.child {
  height: 50%; /* 300px */
}

/* Method 2: Viewport height on parent */
.parent {
  height: 100vh;
}
.child {
  height: 50%; /* 50vh effectively */
}

/* Method 3: Chain of percentage heights from root */
html, body {
  height: 100%;
}
.wrapper {
  height: 100%;
}
.content {
  height: 50%; /* Now this works */
}

Padding and Margin Percentages

Here's where it gets interesting: padding and margin percentages are always relative to the parent's WIDTH, even for vertical padding and margin:

CSS

.parent {
  width: 400px;
}

.child {
  padding-top: 25%;    /* 100px (25% of 400px, NOT height) */
  padding-bottom: 25%; /* 100px */
  padding-left: 25%;   /* 100px */
  padding-right: 25%;  /* 100px */
  margin-top: 10%;     /* 40px (10% of parent WIDTH) */
}

Why This Matters: Aspect Ratio Boxes

This behavior enables the classic aspect ratio trick:

CSS

/* 16:9 aspect ratio container */
.video-wrapper {
  width: 100%;
  padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
  position: relative;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Modern CSS has aspect-ratio for this now, but understanding the padding trick helps you grasp percentage behavior.

Position Percentages

For positioned elements, percentages are relative to the containing block:

CSS

.container {
  position: relative;
  width: 500px;
  height: 300px;
}

.positioned {
  position: absolute;
  top: 10%;     /* 30px from top (10% of 300px) */
  left: 20%;    /* 100px from left (20% of 500px) */
  width: 50%;   /* 250px */
  height: 50%;  /* 150px */
}

Centering with Percentages

CSS

/* Classic centering technique */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The 50% moves the element's top-left corner to the center, then translate(-50%, -50%) shifts it back by half its own dimensions.

Transform Percentages

In transform, percentages are relative to the element itself, not the parent:

CSS

.box {
  width: 200px;
  height: 100px;
  transform: translateX(50%); /* Moves 100px (50% of its own width) */
  transform: translateY(50%); /* Moves 50px (50% of its own height) */
}

This is why translate(-50%, -50%) works for centering — it moves the element by half its own size.

Font-Size Percentages

Font-size percentages are relative to the parent's font-size:

CSS

.parent {
  font-size: 20px;
}

.child {
  font-size: 80%; /* 16px */
}

.grandchild {
  font-size: 80%; /* 12.8px (80% of 16px) */
}

Note: Percentages compound through nested elements, similar to em units.

Line-Height Percentages

Line-height percentages are relative to the element's own font-size:

CSS

.text {
  font-size: 16px;
  line-height: 150%; /* 24px */
}

However, using a unitless number is preferred for line-height to avoid inheritance issues:

CSS

/* Preferred */
.text {
  line-height: 1.5; /* Unitless — scales correctly with font-size */
}

Background-Position Percentages

Background-position percentages position both the image and the container:

CSS

.box {
  background-position: 50% 50%; /* True center */
  background-position: 0% 0%;   /* Top-left corner */
  background-position: 100% 100%; /* Bottom-right corner */
}

A value of 50% 50% centers the background because it aligns the 50% point of the image with the 50% point of the container.

When to Use Percentages

Good Use Cases

CSS

/* Responsive widths */
.sidebar { width: 25%; }
.main { width: 75%; }

/* Fluid containers */
.container { width: 90%; max-width: 1200px; }

/* Responsive padding */
.section { padding: 5% 10%; }

/* Position-based layouts */
.overlay {
  position: absolute;
  inset: 5%;
}

When to Avoid Percentages

CSS

/* Avoid: Height without explicit parent height */
.mystery-height { height: 50%; } /* Probably won't work */

/* Avoid: Small fixed values */
.border-radius { border-radius: 10%; } /* Use px for small values */

/* Avoid: Precise pixel-perfect layouts */
.pixel-precise { width: 33.33333%; } /* Consider grid or flexbox */

Key Takeaways

Width % = relative to parent's content width
Height % = relative to parent's explicit height (must be defined!)
Padding/Margin % = always relative to parent's WIDTH (even vertical)
Transform % = relative to element itself
Font-size % = relative to parent's font-size
Use percentages for fluid, responsive layouts
Combine with max-width for controlled responsiveness

Understanding percentages unlocks responsive design. This knowledge connects with the Viewport Units article for modern responsive approaches, and the Flexbox and Grid modules for layout control.