📖 Notes
LESSON 08 OF 32
The Box Model — margin, padding, border
The CSS Box Model
Every element is a box. Understanding the box model is fundamental to all layouts.
Outside → Inside
Four Layers of Every Box
📏
Margin
Space OUTSIDE the element — pushes other elements away.
🖼️
Border
The visible line around the element.
📦
Padding
Space INSIDE the element, between border and content.
📝
Content
The actual text or image.
The One Fix Every Project Needs
CSS* { box-sizing: border-box; }
.card {
width: 300px;
padding: 20px;
margin: 10px auto;
border: 2px solid #ccc;
border-radius: 12px;
}
⚠️
Without box-sizing: border-box
By default, padding and border ADD to the declared width — a 300px box with 20px padding actually renders 340px wide.
box-sizing: border-box makes width include padding and border, so a 300px box stays exactly 300px.