Suggest an edit

Improve this article

Refine the answer for “How does CSS calculate an element's final size?”. 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)

The final size is calculated according to the **Box Model**. The formula depends on `box-sizing`.

---

### **1) With** `box-sizing: content-box` **(the default value)**

`width` and `height` apply **only to content**.
Actual width:

```javascript
content width
+ padding-left + padding-right
+ border-left + border-right
+ margin-left + margin-right
```

Actual height:

```javascript
content height
+ padding-top + padding-bottom
+ border-top + border-bottom
+ margin-top + margin-bottom
```

---

### **2) With** `box-sizing: border-box`

`width` and `height` include **content + padding + border**.

Actual width:

```javascript
width (padding and border already inside)
+ margin-left + margin-right
```

Actual height:

```javascript
height (padding and border already inside)
+ margin-top + margin-bottom
```

---

### **Key points**

- `margin` **never** counts toward `width`/`height`, it is outer space.
- `padding` and `border` **increase the size** only with `content-box`.
- `border-box` helps keep sizes fixed.

---

If you'd like, I can visualize this with an ASCII diagram or make a picture-diagram.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.