CSS Box Model

Box Model

Every element in CSS is a rectangular box. The box model describes how space is calculated:

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

<div class="box">
Content area
</div>

.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;
}

Box Model Parts

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