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

Source: https://devdocs10.com/articles/css/css-length-units  
By Murat Bo · Published 2026-08-16 · DevDocs10 (https://devdocs10.com)

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

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.

```css
.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.

```css
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.

```css
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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.sidebar {
  width: 300px;
}
```

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

```css
.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.

```css
.field {
  width: 20ch;
}
```

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

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
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`.

```css
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.