Box Model
TechIdea Experts
Author & Reviewer
Master padding, borders, margins, and content sizing to control space on your webpages.
Learning Goals
Video Tutorial Coming Soon
Our expert team is currently recording the visual guide for Box Model.
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.
🎓 Why Trust This Course?
This curriculum was designed by senior software engineers to simulate real-world production environments. We focus on practical, project-based learning instead of abstract theory.
- ✓ Content Review Date: 7/9/2026
- ✓ Official Contact: contact.techideaonline@gmail.com
- ✓ Editorial Policy: Strict peer-review by industry professionals.
Editorial Integrity
Fact CheckedWritten By
TechIdea Learning TeamSenior Developer and Technical Instructor building enterprise-grade learning resources. View full profile.
Reviewed By
TechIdea Editorial Board
Technical accuracy verified by our expert engineering panel.
Why Trust TechIdea?