Box Model
Every element in CSS is a rectangular box. The box model describes how space is calculated:
┌─────────────────────────────┐
│ Margin │
│ ┌───────────────────────┐ │
│ │ Border │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ Content │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
Demo: Visual Box Model
HTML
<div class="box">
Content area
</div> CSS
.box {
width: 200px;
height: 80px;
padding: 20px;
border: 4px solid #6366f1;
margin: 20px;
background: #eef2ff;
color: #1e293b;
font-weight: bold;
text-align: center;
line-height: 80px;
}Live Output Window
Box Model Parts
| Part | Description |
|---|---|
| Content | The actual text or child elements |
| Padding | Space between content and border (inside) |
| Border | The edge around padding |
| Margin | Space between elements (outside) |
Total Width Calculation
Total width = content + padding-left + padding-right
+ border-left + border-right
+ margin-left + margin-right
For the example above:
200 + 20 + 20 + 4 + 4 + 20 + 20 = 288px total width