CSS Margin & Padding Explained

Complete Beginner Guide with Examples

📘 What is Margin?

Margin is the space outside an element's border. It creates distance between one element and another element.

.box{
   margin:20px;
}

This box has MARGIN (space outside)

📘 What is Padding?

Padding is the space inside the element between the content and its border. It increases internal spacing.

.box{
   padding:40px;
}

This box has PADDING (space inside)

📘 Margin vs Padding (Visual Example)

Margin = outer space
Padding = inner space

.combo-box{
   margin:30px;
   padding:30px;
}

📘 Individual Side Properties

margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;

padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;

Shortcut Property

margin:10px 20px 30px 40px;
/* top right bottom left */

padding:20px 40px;
/* top-bottom | left-right */

📘 Margin vs Padding Comparison

Feature	Margin	Padding
Location	Outside Border	Inside Border
Controls	Space between elements	Space inside element
Background Color	Not affected	Background visible
Purpose	Layout spacing	Content spacing

💡 Easy Trick to Remember

👉 Margin = Outside Space (Neighbors)
👉 Padding = Inside Space (Comfort)

🎛 Controls

Margin: 20px Spacing outside the black border.

Padding: 20px Spacing inside the black border.

👀 Live Preview

CONTENT AREA

.demo-box { margin: 20px; padding: 20px; }