⬅ Back

📦 CSS BOX MODEL — COMPLETE NOTE

🔹 1. What is the Box Model?

🧠 Definition

Box model = how elements are structured and spaced on a webpage

👉 Every element = rectangle

📊 Structure of a box

Each element consists of 4 parts: 

[ margin ]
  [ border ]
    [ padding ]
      [ content ]
🔹 4 parts explained
1️⃣ Content

👉 actual content (text, image, etc.) 

width: 200px;
height: 100px;
2️⃣ Padding (inside space)

👉 space BETWEEN content and border 

padding: 20px;

✔ used for design ❌ cannot be negative

3️⃣ Border

👉 element border 

border: 2px solid black;
4️⃣ Margin (outside space)

👉 space BETWEEN elements 

margin: 20px;

✔ separates elements ✔ can be negative

🔹 2. Margin vs Padding (IMPORTANT)

Property Where it works Purpose
padding inside space inside element
margin outside space between elements
💡 Key differences

✔ padding → inside ✔ margin → outside ✔ padding ❌ cannot be negative ✔ margin ✅ can be negative

🔹 3. CSS Properties

📊 Basic properties
margin: 20px;
padding: 10px;
border: 1px solid black;
📊 Individual sides
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
📊 Short syntax
margin: 10px 20px 30px 40px;

(top right bottom left)

🔹 4. Default Values

🧠 Important

Browsers already have default styles

👉 example:

💡 Rule

👉 If you don't set values → browser defaults are used

🔹 5. Width & Height

🧠 Important

width and height do NOT always equal real size

❗ Problem example
.box {
  width: 150px;
  padding: 30px;
  border: 5px solid black;
}

👉 real width = 220px

📊 Formula (default)
total width = width + padding + border
⚠️ Important rule

👉 DO NOT set fixed height usually

❌ bad: 

height: 100px;

✔ better: 

height: auto;
🚨 Problem

👉 content overflow

✔ solution:

🔹 6. box-sizing Property

🧠 Controls how size is calculated
box-sizing: content-box;

🔹 7. content-box (default)

📊 Behavior

👉 width = ONLY content

📊 Formula
width = content + padding + border
📊 Example
.box {
  width: 150px;
  padding: 30px;
  border: 5px solid black;
}

👉 final width = 220px

🔹 8. border-box (modern standard)

📊 Behavior

👉 width = FINAL size

📊 Formula
width = width

👉 padding + border included inside

📊 Example
.box {
  box-sizing: border-box;
  width: 150px;
  padding: 30px;
  border: 5px solid black;
}

👉 final width = 150px

🔹 9. Key Difference

Model Width means
content-box content only
border-box full size
💡 Important

👉 margin is NEVER included in size

🔹 10. Which is better?

✔ modern standard = border-box

💡 Why?

✔ easier calculations ✔ predictable layout ✔ no surprises

🔹 11. Global border-box (BEST PRACTICE)

*,
*::before,
*::after {
  box-sizing: border-box;
}
🧠 What it does

👉 applies to ALL elements

💡 Note

If you use modern-normalize, this is already included

🔹 12. Example Full Box

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}
📊 Visual meaning

🔹 13. Summary

📦 Box model = 4 parts

✔ content ✔ padding ✔ border ✔ margin

📊 Important rules

✔ padding → inside ✔ margin → outside ✔ margin can be negative ✔ padding cannot

📊 Sizing

✔ default = content-box ✔ modern = border-box

📊 Best practice

✔ use border-box globally ✔ avoid fixed height ✔ use margin for spacing

💪 FINAL TIP

👉 Think like a designer:

➡️ every page = blocks ➡️ every block = box

⬅ Back