Every CSS element is essentially a box. The box model explains how elements are sized based on several CSS properties.

The Four Layers

From the inside to the outside:

1. Content area - Where text and images appear
2. Padding - Clears an area around the content (inside the border)
3. Border - Goes around the padding and content
4. Margin - Clears an area outside the border

Visualizing the Box Model

The best way to see the box model is in your browser’s DevTools. Right-click an element, select “Inspect”, and look at the box model diagram.

You’ll see:

• Light blue = content area
• Green = padding
• Yellow/tan = border
• Orange = margin

Default Sizing Behavior

By default, when you set a width or height on an element, it applies only to the content area.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

The total width is actually: 200px + 20px + 20px + 5px + 5px = 250px

This can be confusing! That’s why box-sizing: border-box is commonly used (covered in the next lesson).

Box Model Properties Summary

Property	Description
width / height	Size of content area
padding	Inner spacing
border	Element edge
margin	Outer spacing

Lessons in this unit:

0:	Introduction
1:	▶︎ Understanding the CSS Box Model
2:	How to Use CSS Box Sizing
3:	How to Use CSS Margin
4:	How to Use CSS Padding
5:	How to Style CSS Borders