CSS Box Model Explained

Every element in web design is a rectangular box. The Box Model describes how the size of that box is calculated.

Layers (from inside out): Content → Padding → Border → Margin

Content Area

Margin

Border

Padding

Content

Size Calculation:

With border-box (current):
Total Width = width (includes content + padding + border) + margin
= 300px + 40px + 40px = 380px

With content-box:
Total Width = width + padding + border + margin
= 300px + 30px + 30px + 10px + 10px + 40px + 40px = 460px

Current box-sizing: border-box

Key Properties:

• width/height: Size of the content area (or content+padding+border with border-box)
• padding: Space between content and border
• border: Visible line around padding
• margin: Space between this element and others
• box-sizing: Controls how width/height are calculated