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:
- Content
- Padding
- Border
- 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:
<!DOCTYPE html>
<html>
<head>
<title>Box Model Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.box {
width: 250px;
height: 120px;
padding: 20px;
border: 4px solid black;
margin: 40px;
background-color: lightblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
This box demonstrates content, padding, border, and margin.
</div>
</body>
</html>