The Box Model

The CSS box model is the foundation of layout on the web. Every HTML element is rendered as a rectangular box, and the box model describes how the size of that box is calculated. Understanding the box model is essential for controlling spacing, sizing, and alignment.

---

The Four Layers

Every element's box consists of four layers, from inside to outside:

┌──────────────────────────────────┐
│            Margin                │
│  ┌────────────────────────────┐  │
│  │          Border            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │       Padding        │  │  │
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │    Content      │  │  │  │
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Layer	Description	CSS Property
Content	The actual text, image, or child elements	width, height
Padding	Space between the content and the border	padding
Border	A line around the padding	border
Margin	Space outside the border, separating the element from others	margin

---

Content Area