# The Box Model — CSS

Source: https://www.geekswithgeeks.com/en/css/css-box-model

> Every element is a rectangular box: content, padding, border, margin.

## Four layers

From inside out: **content** (text/image), **padding** (space inside the border), **border** (the edge line), **margin** (space outside, between boxes).

## Like a framed photo

Content is the **photo**, padding is the **mat board** around it, border is the **frame**, and margin is the **wall space** you leave before the next frame.

## All four in one rule

Shorthand order for padding/margin/border-width: top, right, bottom, left.

```css
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 10px 20px;   /* top/bottom 10px, left/right 20px */
}
```

**Quiz:** Going from inside to outside, what's the correct order?

- [ ] content → border → padding → margin
- [x] content → padding → border → margin
- [ ] margin → border → padding → content

*Answer:* content → padding → border → margin. Padding sits right against the content, then the border, then the margin outside everything.