Suggest an edit

Improve this article

Refine the answer for “What relative units of measurement exist in CSS?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Relative units in CSS are units that **depend on the font size, the browser window size, or other parameters of the element/window**. They are flexible and help create responsive layouts.

---

### **Groups of relative units**

#### **1. Relative to font**

| Unit | Relative to |
|---|---|
| `em` | parent's font size |
| `rem` | root element's font size (`html`) |
| `ex` | the height of the letter *x* in the current font |
| `ch` | the width of the `0` character in the current font |

Example:

```css
p { font-size: 2em; } /* 2 times larger than the parent */
```

---

#### **2. Relative to window size (viewport)**

| Unit | What it means |
|---|---|
| `vw` | 1vw = 1% of window width |
| `vh` | 1vh = 1% of window height |
| `vmin` | 1% of the smaller side (width or height) |
| `vmax` | 1% of the larger side |

Used for responsive blocks and fonts, for example:

```css
h1 { font-size: 5vw; } /* font size depends on window width */
```

---

#### **3. Percentage**

| Unit | Description |
|---|---|
| `%` | depends on the parent element (for width, height, spacing, and so on) |

---

### **Summary**

| Group | Units | When to use |
|---|---|---|
| Font-based | `em`, `rem`, `ex`, `ch` | for text, spacing, responsive interfaces |
| Browser window | `vw`, `vh`, `vmin`, `vmax` | responsive blocks/headings |
| Percentage | `%` | sizes dependent on the container |

---

The most commonly used in practice: `rem`**,** `em`**,** `%`**,** `vw`**,** `vh`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts276 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.