📦 CSS Box Model Demo

Understanding margin, border, padding, and content

/* Every HTML element is a box */
.element {
    margin: 30px; /* space OUTSIDE the border */
    border: 2px solid black; /* edge around padding */
    padding: 20px; /* space INSIDE the border */
    width: 200px; /* content width */
}

🎨 Visual Representation of Box Model

CONTENT
Text, images, or other elements
↑ PADDING (space inside border) ↑
↑ BORDER (edge around padding) ↑

📄 1. CONTENT - The actual text or image

Content box only
No padding, no border, no margin.
This is just the content.

width: 300px; /* Only content width */

🟡 2. PADDING - Space INSIDE the border

Padding adds space between content and border. Background color extends into padding.

No padding - text touches the border edge
Padding: 10px - subtle space inside
Padding: 20px - comfortable reading space
Padding: 40px - lots of breathing room
Padding on individual sides
top: 10px | right: 30px | bottom: 20px | left: 5px
Padding shorthand
padding: 20px 40px; = top/bottom 20px, left/right 40px

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding-top: 10px; /* individual side */

🟢 3. BORDER - The edge around padding

Border wraps around padding and content.

No border
Solid border
Dashed border
Dotted border
Thick border (8px)
Rounded corners (border-radius: 15px)

border: 2px solid blue;
border-radius: 10px; /* rounds corners */
border-top: 1px dashed red; /* border on one side */

🔵 4. MARGIN - Space OUTSIDE the border

Margin adds space between elements. Background color does NOT extend into margin.

Margin: 0 - box touches container edge
Margin: 10px - small gap from other elements
Margin: 30px - noticeable gap
Margin: 60px - large gap
Margin on individual sides
top: 20px | right: 10px | bottom: 30px | left: 50px

margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 0 auto; /* centers block elements horizontally */

👁️ Visual Comparison: See the Difference

No Padding
Text touches border edge
With Padding: 20px
Space between text and border
With Margin: 20px
Space between this box and others

📦 Complete Box Model Example

Complete Box Model
margin: 40px (space outside)
border: 5px solid orange (edge)
padding: 30px (space inside)
width: 300px (content width)

.box {
    width: 300px;
    padding: 30px;
    border: 5px solid orange;
    margin: 40px;
}

📏 Important: box-sizing Property

Without box-sizing: border-box - width + padding + border = total width

width: 300px + padding: 20px + border: 5px = 350px total width

With box-sizing: border-box - padding and border included inside width

width: 300px (includes padding and border inside)

/* Modern reset - use on all elements */
* {
    box-sizing: border-box;
}

📋 Quick Reference Card

Layer What it does Example
Content The actual text/image width: 200px;
Padding Space INSIDE border (background applies) padding: 20px;
Border Edge around padding border: 2px solid black;
Margin Space OUTSIDE border (transparent) margin: 30px;