Box Model
Understand the invisible boxes behind every webpage using content, padding, borders, and margins.
>_ What Is the CSS Box Model?
Browsers treat HTML elements like rectangular boxes. The CSS Box Model explains the space that makes up those boxes: content, padding, border, and margin.
Understanding these four layers makes it much easier to control spacing, sizing, cards, buttons, navigation, page sections, and eventually entire layouts.
Content
The actual text, image, or other content inside the element.
Padding
Space between the content and the element’s border.
Border
The visible line surrounding the content and padding.
Margin
Space outside the border that separates the element from neighboring elements.
>_ Think From the Inside Out
The easiest way to remember the Box Model is to begin in the center and move outward.
Think: Content → Padding → Border → Margin. Start with what’s inside the box and move outward.
>_ Content
The content area contains whatever is inside the element — such as text or an image.
width: 300px;
}
By default, a declared width normally describes the content box. Padding and borders can then increase the element’s total rendered size.
>_ Padding
Padding creates space inside the box, between the content and the border.
padding: 20px;
}
Increase the padding and the content gets more breathing room inside its box.
>_ Border
The border wraps around the content and padding. You can control its width, style, and color.
border: 3px solid #009cff;
}
>_ Margin
Margin creates space outside the border, separating the element from surrounding elements.
margin: 30px;
}
>_ Padding vs. Margin
padding: 20px;
Adds space inside the element’s border.
margin: 20px;
Adds space outside the element’s border.
If you want more room inside
a button or card, think padding.
If you want more room between
elements, think margin.
>_ Shorthand Values
Padding and margin can use one, two, three, or four values.
padding: 20px;
/* vertical | horizontal */
padding: 10px 20px;
/* top | right | bottom | left */
margin: 10px 20px 30px 40px;
Four values move clockwise: Top → Right → Bottom → Left. Think of a clock starting at 12 o’clock.
>_ box-sizing: border-box
There’s one more property worth knowing because it makes sizing boxes much easier: box-sizing.
width: 300px;
padding: 20px;
border: 3px solid #009cff;
box-sizing: border-box;
}
With border-box, the declared width includes the content, padding, and border. This often makes element sizing easier to predict.
>_ Quick Reference
width
Controls the width of the box according to the current box-sizing model.
padding
Adds spacing between content and border.
border
Draws the boundary around the content and padding.
margin
Creates spacing outside the border.
box-sizing
Controls how declared width and height are calculated.
border-box
Includes padding and border inside the declared width and height.
Build a Profile Card
Use the CSS Box Model to transform the starter content into a clean profile card.
- ✓ Give the card a width.
- ✓ Add padding inside the card.
- ✓ Add a visible border.
- ✓ Add margin outside the card.
-
✓
Use
box-sizing: border-box;. - ✓ Change at least one spacing value and observe how the box changes.
Box Model Challenge
What You’ve Learned
padding creates space
inside the border.
border surrounds the
content and padding.
margin creates space
outside the border.
box-sizing: border-box
makes element dimensions easier to predict.
Nice work!
Finished this lesson? Mark it complete to track your progress.