The Sacred CSS Box Model
In CSS, literally every single element—whether it is a giant card, a circular avatar, or a single letter—is secretly a rectangular box. The Box Model consists of 4 concentric layers from inside to outside: Content, Padding, Border, and Margin.
"Imagine ordering a fragile glass vase online. The vase itself is the Content. The bubble wrap stuffed inside the cardboard box is Padding. The cardboard box walls are the Border. The empty space on the delivery truck between your box and the next box is Margin."
Deep Dive: How It Works
1. Content: The actual text, image, or child elements (width x height).
2. Padding: Transparent space inside the box between the content and the border.
3. Border: The physical outline wrapping around the padding and content.
4. Margin: Invisible personal space outside the border separating this element from neighboring elements.
Syntax Blueprint
/* [Margin [Border [Padding [ Content ] Padding] Border] Margin] */
.card {
margin: 16px;
border: 1px solid #383a40;
padding: 20px;
width: 300px;
}The 4 concentric layers that determine total element space on screen.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Thinking padding pushes outside the borderWhy it happens: Confusing padding with margin.
How to fix: Padding is inside the border (internal cushion); margin is outside the border (external buffer).
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create a box with padding and border
- Write a CSS rule for .panel with padding: 16px; and border: 1px solid #383a40;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.