CSS Box Model Explained: Margin, Padding, Border & Sizing
A deep dive into the CSS box model. Learn how margin, padding, borders, width, height, and box sizing really work in real layouts.
CSS Box Model Explained: Margin, Padding, Border & Sizing
This lesson is a true deep dive into the CSS Box Model .
If layouts ever felt confusing, unpredictable, or broken, the box model is the reason.
Every pixel on the screen is calculated using this system.
Buttons, cards, grids, flex items, full-page layouts, everything is a box.
Once you master this, CSS stops feeling like magic and starts feeling logical .
Info!
The box model is not optional knowledge. It is the foundation of all layout systems.
1. The CSS Box Model Explained Visually
Each element is built from four layers , calculated from inside to outside:
Content box – text, image, or child elements Padding box – space between content and border Border box – visible boundary Margin box – spacing outside the element
The browser does math like this:
Total Width =
content width
+ left padding + right padding
+ left border + right border
✏️ Edit ▶ Run <!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #2563eb;
margin: …
