# The Box Model — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Understand the box model of content, padding, border and margin and how spacing shorthand works.

## 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?

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

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