The Box Model

The CSS Box Model is a fundamental concept that every web developer must understand. It describes how every HTML element is rendered as a rectangular box, and how the space around and within that box is calculated.

What is the Box Model?

Every element in HTML is treated as a box. This box consists of four layers, from inside to outside:

1. Content - The actual content of the element (text, images, etc.)
2. Padding - The space between the content and the border
3. Border - A line that surrounds the padding
4. Margin - The space outside the border, separating the element from other elements

Interactive Box Model Demo

Use the interactive demo below to explore how each property affects the total size of an element. Adjust the sliders and watch how the box changes in real-time.

/* Box Sizing */
box-sizing: content-box;

/* Dimensions */
width: 120px; /* content width */
height: 80px;

/* Padding */
padding: 20px 20px 20px 20px;

/* Border */
border-width: 4px 4px 4px 4px;
border-style: solid;

/* Margin */
margin: 24px 24px 24px 24px;

Understanding Each Layer

Content

The content area is where your text, images, or other content lives. You control its size with the width and height properties.

1
.element {
2
  width: 200px;
3
  height: 100px;
4
}

Padding

Padding creates space inside the element, between the content and the border. It's useful for giving content some "breathing room."

1
.element {
2
  /* All sides */
3
  padding: 20px;
4

5
  /* Individual sides */
6
  padding-top: 10px;
7
  padding-right: 15px;
8
  padding-bottom: 10px;
9
  padding-left: 15px;
10

11
  /* Shorthand: top right bottom left */
12
  padding: 10px 15px 10px 15px;
13

14
  /* Shorthand: vertical horizontal */
15
  padding: 10px 15px;
16
}

Border

The border surrounds the padding and content. It can have different styles, widths, and colors.

1
.element {
2
  border: 2px solid #333;
3

4
  /* Or specify each side */
5
  border-top: 1px dashed blue;
6
  border-right: 2px solid green;
7
}

Margin

Margin creates space outside the element, separating it from neighboring elements.

1
.element {
2
  /* All sides */
3
  margin: 20px;
4

5
  /* Center horizontally */
6
  margin: 0 auto;
7

8
  /* Individual sides */
9
  margin-top: 10px;
10
  margin-bottom: 20px;
11
}

Calculating Total Size

By default (with box-sizing: content-box), the total width of an element is:

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

This can make layouts tricky because setting width: 100px doesn't mean the element takes up exactly 100px.

The box-sizing Property

The box-sizing property changes how the total width and height are calculated:

• content-box (default): Width and height only apply to the content area
• border-box: Width and height include padding and border

1
/* Recommended: Apply to all elements */
2
*, *::before, *::after {
3
  box-sizing: border-box;
4
}

With border-box, if you set width: 100px, the element will be exactly 100px wide, including padding and border. This makes layouts much more predictable.

Margin Collapsing

One quirk of the box model is margin collapsing. When two vertical margins touch, they collapse into a single margin equal to the larger of the two.

1
.box1 {
2
  margin-bottom: 20px;
3
}
4

5
.box2 {
6
  margin-top: 30px;
7
}
8

9
/* The gap between them is 30px, not 50px! */

This only happens with vertical margins, not horizontal ones.

Summary

• Every element is a box with content, padding, border, and margin
• Use box-sizing: border-box for more intuitive sizing
• Padding is inside the border, margin is outside
• Vertical margins collapse when they touch

Understanding the box model is essential for creating precise layouts and debugging spacing issues in CSS.