he Box Model is one of the most important concepts in CSS.

Every single element on a webpage is treated like a box.

When you understand the box model, you understand:

• Why elements have space around them
• Why layouts sometimes "break"
• How to control spacing properly

What Is the Box Model?

Imagine every HTML element as a box made up of four layers:

+---------------------------+
|          Margin           |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |    Padding    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

The four parts are:

1. Content
2. Padding
3. Border
4. Margin

Let’s break them down.

1️⃣ Content

This is the actual text, image, or element inside the box.

Example:

<div class="box">Hello World</div>

You can control content size using:

.box {
  width: 200px;
  height: 100px;
}

2️⃣ Padding (Space Inside)

Padding is the space between the content and the border.

.box {
  padding: 20px;
}

This adds 20px space inside the box.

You can control sides individually:

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Or shorthand:

padding: 10px 20px 15px 5px;

Order:

Top → Right → Bottom → Left (clockwise)

3️⃣ Border

Border wraps around padding and content.

.box {
  border: 3px solid black;
}

This means:

• 3px thickness
• solid line
• black color

You can also customize:

border-width: 5px;
border-style: dashed;
border-color: red;

4️⃣ Margin (Space Outside)

Margin creates space outside the border.

.box {
  margin: 30px;
}

This pushes the box away from other elements.

Individual sides:

margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 5px;

Or shorthand:

margin: 20px 10px;

(Top/Bottom = 20px, Left/Right = 10px)

Total Width Calculation

This is where beginners get confused.

By default:

Total Width =
Width + Padding + Border

Example:

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

Actual total width becomes:

200 (width)

• 40 (20 left + 20 right padding)
• 10 (5 left + 5 right border)
• = 250px total width

Even though you set width to 200px!

Fixing This with box-sizing

To make width behave normally, use:

box-sizing: border-box;

Now:

Width includes padding and border.

Example:

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

Now the total width stays 200px.

This is the modern best practice.

Simple Visual Example

HTML

<div class="box">This is a box</div>

CSS

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background-color: lightgray;
}

What happens?

• 200px content width
• 20px space inside
• 5px border
• 30px space outside

Compilation of Entire Code

Below is the complete combined example: