CSS Length Units: px, em, rem, ch, and ex Explained

CSS length units control how large text, spacing, boxes, and other layout values appear on the page. Understanding px, em, rem, ch, and ex helps you build layouts that are easier to scale, more readable, and more accessible.

Quick answer: Use px for fixed values, rem for most scalable typography and spacing, em for component-local scaling, and ch or ex when you want measurements based on the current font.

Difficulty: Beginner

You'll understand this better if you know: basic CSS syntax, how font sizes work, and the difference between fixed and scalable values.

1. What Is CSS Length Units?

CSS length units are the values you use when a property expects a size. They tell the browser how to interpret numbers like 16px or 1.5rem.

px is a fixed-length unit used for exact sizes.
em is relative to the current element’s font size.
rem is relative to the root element’s font size.
ch is based on the width of the 0 glyph in the current font.
ex is based on the x-height of the current font.

These units are most often used with properties such as font-size, margin, padding, width, height, gap, and line-height.

2. Why CSS Length Units Matter

Choosing the right unit affects how your design behaves across devices, zoom levels, and user settings. The same design can feel rigid or flexible depending on which unit you use.

Length units matter because they help you:

build layouts that respond to user font preferences;
keep typography proportional across components;
reduce unexpected spacing problems in nested elements;
make code easier to maintain by using consistent scaling rules.

In practice, most modern CSS uses rem for global spacing and font sizing, em for component-specific scaling, and px only when a design needs a hard limit or precise alignment.

3. Basic Syntax or Core Idea

A CSS length value is usually a number followed by a unit. The browser reads the unit and converts it into a rendered size.

Basic syntax example

This example shows the same property using different length units.

.box {
  font-size: 16px;
  margin-bottom: 1.5rem;
  padding: 1em;
  max-width: 40ch;
}

Each value means something different: 16px is fixed, 1.5rem follows the root font size, 1em follows the current element, and 40ch limits the width by character count.

What makes a unit relative

Relative units change based on context. That context might be the element’s own font size, the root font size, or the current font’s glyph metrics.

That is why a value like 2em can look very different inside two nested components, while 2rem stays consistent across the page.

4. Step-by-Step Examples

Example 1: Fixed size with px

Use px when you want a precise, non-scaling value. This is common for borders, icon sizes, and pixel-accurate details.

button {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 16px;
}

This button keeps the same shape regardless of the surrounding text size.

Example 2: Root-based scaling with rem

Use rem for spacing and typography that should scale consistently from a single base size.

html {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

If the root font size changes, the heading and spacing scale together in a predictable way.

Example 3: Component-local scaling with em

Use em when a component should scale relative to its own text size. This is helpful for reusable UI pieces like cards and buttons.

.card {
  font-size: 1rem;
  padding: 1.25em;
  border-radius: 0.75em;
}

.card h2 {
  font-size: 1.5em;
}

Because the spacing and heading size are tied to the card’s font size, the whole component grows or shrinks together.

Example 4: Text-based width with ch

Use ch for readable line lengths or form fields that should fit a certain number of characters.

.article {
  max-width: 65ch;
}

input[type="text"] {
  width: 30ch;
}

This helps content stay readable and keeps inputs sized to the kind of text they accept.

Example 5: Font-metric sizing with ex

Use ex when you want a size related to the font’s x-height. It is less common, but it can help with typography-sensitive adjustments.

.note {
  margin-top: 1ex;
  padding-left: 2ex;
}

ex changes with the font, so it is useful only when that behavior is intentional.

5. Practical Use Cases

Use rem for page-wide spacing scales such as section padding, headings, and layout gaps.
Use em for buttons, badges, and cards that should scale with their own text size.
Use px for thin borders, hairline details, and exact shadows or outlines.
Use ch for readable article widths, code-like content, and form controls that accept text.
Use ex for niche typography adjustments tied to a specific font’s appearance.

A common pattern is to combine them: for example, a site may use rem for layout rhythm, em for component padding, and px for borders.

6. Common Mistakes

Mistake 1: Using em when you expected a stable global size

em is relative to the current element’s font size, so nested elements can grow unexpectedly. This often surprises developers when they apply it to spacing deep inside components.

Problem: The padding doubles because em compounds inside nested elements, making the spacing larger than intended.

.panel {
  font-size: 20px;
}

.panel .title {
  font-size: 1.5em;
  padding-top: 1em;
}

Fix: Use rem for spacing that should stay consistent across the page, or reset the component scale carefully.

.panel {
  font-size: 20px;
}

.panel .title {
  font-size: 1.5em;
  padding-top: 1rem;
}

The corrected version works because the padding no longer depends on the nested font size.

Mistake 2: Assuming px means physical pixels

Many beginners think px is always one real device pixel. In CSS, that is not how it works; the browser maps CSS pixels to physical pixels based on device density and zoom.

Problem: Treating px as a fixed physical measurement can lead to confusion when the same layout looks different on high-density screens or zoomed pages.

.sidebar {
  width: 300px;
}

Fix: Use px for visual consistency, but choose relative units when the size should respond to text or accessibility settings.

.sidebar {
  width: 18rem;
}

The corrected version works better when the layout should scale with the user’s base font size.

Mistake 3: Using ch as if it always matches character count exactly

ch is based on the width of the 0 glyph, not an exact average character width. That makes it useful, but not perfectly precise for every font or string.

Problem: A width like 20ch does not guarantee exactly 20 characters will fit, especially with proportional fonts.

.field {
  width: 20ch;
}

Fix: Treat ch as an approximation, and choose a width that works visually with the selected font.

.field {
  width: 24ch;
  font-family: Arial, sans-serif;
}

The corrected version acknowledges that ch is a font-based estimate, not a character counter.

7. Best Practices

1. Use rem for most document-level spacing

rem gives you a stable scale rooted in the page’s base font size. That makes spacing easier to manage across sections and components.

.section {
  padding: 2rem;
}

This approach keeps page layout predictable while still allowing the entire design to respond to font-size changes.

2. Use em for self-scaling components

em is ideal when a component’s spacing should stay proportional to its own text size. This is especially useful for buttons, pills, and labels.

.chip {
  font-size: 0.875rem;
  padding: 0.5em 0.75em;
}

The padding scales naturally with the chip’s text, so the element stays balanced if its font size changes.

3. Reserve px for precision, not entire layouts

px is still useful, but it is best for fine-grained details instead of large layout systems.

.divider {
  height: 1px;
  background: #ddd;
}

This keeps the divider crisp without forcing the rest of the layout into a rigid scale.

8. Limitations and Edge Cases

em can compound in nested elements, which is useful for scaling but dangerous if you expect fixed spacing.
rem depends on the root font size, so changing html font-size changes the whole scale.
ch varies by font and font weight, so the same value can look different across typefaces.
ex is less consistent across fonts because x-height varies significantly, and some fonts do not make it visually useful.
px is not a literal physical pixel in CSS, so it may not match device pixels on high-density screens.

Another edge case is browser rendering: the measured result of ch or ex can change when font loading completes, because the fallback font and final font may not have the same metrics.

9. Practical Mini Project

Here is a small, complete content card that uses each unit where it fits best: rem for page spacing, em for component padding, ch for readable text width, and px for a thin border.

html {
  font-size: 16px;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 2rem;
  background: #f7f7f7;
}

.card {
  max-width: 42ch;
  padding: 1.25em;
  border: 1px solid #ccc;
  border-radius: 0.75rem;
  background: #fff;
}

.card h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.75em;
}

.card p {
  line-height: 1.6;
}

This mini project shows a practical sizing strategy: broad page layout in rem, component internals in em, readable text width in ch, and precise borders in px.

10. Key Points

px is best for fixed visual precision.
em scales relative to the current element’s font size.
rem scales relative to the root element and is the most common choice for consistent design systems.
ch is useful for text-oriented widths and readable line lengths.
ex is a font-metric unit with niche use cases and less predictable results.

11. Practice Exercise

Create a page with a heading, a paragraph, and a form field.
Set the page padding in rem, the heading size in em, the paragraph width in ch, and the input width in ch.
Adjust the root font size and observe which values scale immediately.

Expected result: The whole layout should grow or shrink in a controlled way, while the input and paragraph widths stay visually appropriate.

Hint: Keep the root font size on html and avoid setting every nested element in px.

html {
  font-size: 16px;
}

body {
  padding: 2rem;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 2em;
}

p {
  max-width: 60ch;
}

input {
  width: 28ch;
  padding: 0.5em;
}

This solution demonstrates the main sizing patterns in one place and helps you see how different units behave together.

12. Final Summary

CSS length units control how sizes are measured, and the choice of unit changes both the appearance and the flexibility of your design. px gives you fixed precision, em gives you element-relative scaling, rem gives you predictable global scaling, and ch and ex provide font-based measurements for special cases.

For most layouts, the safest rule is simple: use rem for shared spacing and type scale, em for components that should scale together, and px only where exact control matters. From there, ch and ex become useful tools when you need measurement tied to text shape rather than fixed geometry.

Next, try rebuilding one of your existing components using rem and em together so you can see how much easier the spacing becomes to manage.