CodeNexium.com
CSS Box Model · codenexium.com

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

Courses