📦 CSS Box Model

Every HTML element is a rectangular box. The box model describes how space is calculated around these boxes.

Box Model Components

The Four Layers


┌─────────────────────────────────────┐
│          MARGIN (transparent)        │
│  ┌───────────────────────────────┐  │
│  │    BORDER                     │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING               │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  │   (width/height)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Layer	Description
Content	The actual content (text, images, etc.)
Padding	Space between content and border (inside)
Border	Line around the padding
Margin	Space outside the border (separates from other elements)

Visual Example

CONTENT
(padding around me)
(border around padding)
(margin outside border)

Calculating Total Size

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

📐 Size Calculation

Total width = width + padding-left + padding-right + border-left + border-right

= 200px + 20px + 20px + 5px + 5px = 250px

Total height = height + padding-top + padding-bottom + border-top + border-bottom

= 100px + 20px + 20px + 5px + 5px = 150px

Margin adds space outside but doesn't affect the element's size.

box-sizing Property

The default box-sizing: content-box can be confusing because padding and border are added to the width/height.

Default (content-box)

.box {
  box-sizing: content-box; /* default */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Actual width = 250px (200 + 20 + 20 + 5 + 5) */
}

Better (border-box)

.box {
  box-sizing: border-box; /* RECOMMENDED */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Actual width = 200px (padding and border included!) */
}

💡 Best Practice

Always set box-sizing: border-box globally:

* {
  box-sizing: border-box;
}

This makes sizing much more intuitive!

Margin

Margin Shorthand

/* One value: all sides */
.box { margin: 20px; }

/* Two values: top/bottom left/right */
.box { margin: 10px 20px; }

/* Three values: top left/right bottom */
.box { margin: 10px 20px 30px; }

/* Four values: top right bottom left (clockwise) */
.box { margin: 10px 20px 30px 40px; }

Margin Collapse

When two vertical margins meet, they collapse into one. The larger margin wins.

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

/* Space between them = 30px (not 50px!) */

📝 Note

Margin collapse only happens with vertical margins (top/bottom). Horizontal margins (left/right) don't collapse.

Centering with Margin

/* Center a block element horizontally */
.box {
  width: 300px;
  margin: 0 auto; /* top/bottom: 0, left/right: auto */
}

Padding

Padding creates space inside the element, between content and border.

/* Same shorthand rules as margin */
.box {
  padding: 20px;                  /* All sides */
  padding: 10px 20px;             /* Vertical Horizontal */
  padding: 10px 20px 30px;        /* Top H Bottom */
  padding: 10px 20px 30px 40px;   /* Clockwise */
}

/* Individual sides */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

⚠️ Common Mistake

Padding affects the background! If you set a background color, it extends into the padding area (but not into margin).

Border

/* Shorthand: width style color */
.box {
  border: 2px solid #333;
}

/* Individual properties */
.box {
  border-width: 2px;
  border-style: solid; /* solid, dashed, dotted, double */
  border-color: #333;
}

/* Individual sides */
.box {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;
}

/* Rounded corners */
.box {
  border-radius: 10px;      /* All corners */
  border-radius: 10px 20px;  /* TL/BR TR/BL */
  border-radius: 50%;       /* Circle */
}

Practical Examples

Card Component

.card {
  /* Content size */
  width: 300px;

  /* Spacing inside */
  padding: 20px;

  /* Border */
  border: 1px solid #ddd;
  border-radius: 8px;

  /* Spacing outside */
  margin: 20px;

  /* Make sizing intuitive */
  box-sizing: border-box;
}

Button with Spacing

.button {
  /* Content won't touch edges */
  padding: 10px 20px;

  /* Visual boundary */
  border: 2px solid #4a90e2;
  border-radius: 4px;

  /* Space from other elements */
  margin: 10px;
}

Dev Tools Inspection

🔍 Using Browser DevTools

Right-click any element and select "Inspect" to see:

The box model diagram (margin, border, padding, content)
Calculated sizes for each layer
Which CSS rules are affecting the element

This is the BEST way to understand the box model!

Summary

📚 What you learned

The box model has 4 layers: content, padding, border, margin
Total size = content + padding + border (not margin)
box-sizing: border-box makes sizing intuitive
Margin collapses vertically, padding doesn't
Use margin for space between elements
Use padding for space inside elements
DevTools shows the box model visually