CssComparisonBeginner · 4 min read

Px vs em vs rem vs percent in CSS: Key Differences and Usage

In CSS, px is a fixed size unit, while em and rem are relative units based on font size—em depends on the parent element's font size, and rem depends on the root element's font size. Percent is relative to the size of the parent element, often used for width or height. Choosing between them depends on whether you want fixed or scalable, responsive sizing.

⚖️

Quick Comparison

Here is a quick overview of the main CSS units px, em, rem, and percent to help you understand their differences at a glance.

Unit	Type	Relative To	Common Use	Scalability
px	Absolute	None (fixed size)	Precise control of size	No - fixed size
em	Relative	Parent element's font size	Font size, spacing	Yes - scales with parent
rem	Relative	Root element's font size	Font size, spacing	Yes - consistent scaling
percent	Relative	Parent element's size	Width, height, layout	Yes - scales with container

⚖️

Key Differences

px is a fixed unit that always represents the same number of pixels on the screen, making it predictable but not flexible for different screen sizes or user settings.

em is relative to the font size of the parent element, so it can compound if nested deeply, which can be useful for scalable designs but sometimes tricky to manage.

rem is relative to the root <html> font size, providing consistent scaling across the page regardless of nesting, making it easier to maintain uniform sizing.

percent is relative to the size of the parent container, often used for widths and heights to create flexible layouts that adapt to different screen sizes.

⚖️

Code Comparison

Here is an example using px to set font size and width:

css

body {
  font-size: 16px;
}
.container {
  width: 300px;
  font-size: 20px;
}
.text {
  font-size: 12px;
  width: 150px;
}

Output

A container 300 pixels wide with text sized exactly 12 pixels.

↔️

rem Equivalent

The same example using rem units for scalable sizing based on the root font size:

css

html {
  font-size: 16px;
}
.container {
  width: 18.75rem; /* 300px / 16 */
  font-size: 1.25rem; /* 20px / 16 */
}
.text {
  font-size: 0.75rem; /* 12px / 16 */
  width: 9.375rem; /* 150px / 16 */
}

Output

A container sized relative to root font size, scaling if root font changes.

🎯

When to Use Which

Choose px when you need exact control over size and don't want scaling, such as for borders or small UI elements.

Choose em when you want sizes to scale relative to the parent, useful for components that should adapt inside different containers.

Choose rem for consistent, scalable sizing across the whole page, great for font sizes and spacing that should respond to user settings.

Choose percent for flexible layouts where elements should grow or shrink based on their container size, like responsive widths or heights.

✅

Key Takeaways

px is fixed and precise but not responsive.

em scales relative to parent font size and can compound.

rem scales relative to root font size for consistent sizing.

percent is best for flexible layout sizing based on parent.

Use relative units for responsive, accessible designs.