Box Model
Master padding, borders, margins, and content sizing to control space on your webpages.
Learning Goals
The Core Concept
In CSS, every HTML element is treated as a rectangular box. The CSS Box Model governs how that box's size and spacing are computed. It has four layers: Content (text/images), Padding (internal space), Border (edge outline), and Margin (external space). Understanding how padding pushes outward from the inside, and margin pushes other elements away on the outside, is key to laying out pages.
Visual guide
Css concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
.card {
width: 300px;
padding: 20px;
border: 2px solid #cbd5e1;
margin: 15px;
box-sizing: border-box; /* keeps width exactly 300px */
}Expected Output
A box of 300px width with grey borders, space inside the borders, and space outside the borders.
Build a Profile Card Box
Hands-on practice task
The Challenge
Write the CSS for a card class .profile-card that has a width of 250px, a light gray border, 16px padding on all sides, 24px margin on the bottom, and uses border-box sizing.
Helpful Hints
- •Use box-sizing: border-box to keep the size exact.
- •Set border: 1px solid #e2e8f0; or similar color.
Quick Knowledge Check
What is the difference between margin and padding?
Why does padding make my element wider than the width I set?
Continue Learning
Next steps after this lesson
Write the CSS for a card class .profile-card that has a width of 250px, a light gray border, 16px padding on all sides, 24px margin on the bottom, and uses border-box sizing.
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.