📦 CSS COURSE – MODULE 5: BOX MODEL

📁 File: box-model.md

📦 CSS Box Model

📌 Introduction

Every HTML element in CSS is treated like a box.

This box controls:

• size
• spacing
• borders
• layout behavior

👉 If you don’t understand the box model, CSS will feel confusing.

🧱 1. The Box Model Structure

Every element is made of:

+------------------------+
|        Margin          |
|  +------------------+  |
|  |     Border       |  |
|  |  +------------+  |  |
|  |  | Padding    |  |  |
|  |  |  Content   |  |  |
|  |  +------------+  |  |
|  +------------------+  |
+------------------------+

📏 2. Content

div {
  width: 200px;
  height: 100px;
}

✔ This is the actual content area

🧩 3. Padding (Inside spacing)

div {
  padding: 20px;
}

✔ Space inside the box ✔ Pushes content away from border

🧱 4. Border

div {
  border: 2px solid black;
}

✔ Visible line around element

📦 5. Margin (Outside spacing)

div {
  margin: 20px;
}

✔ Space between elements

⚠️ VERY IMPORTANT RULE

By default:

width = content only (NOT full box)

🧠 6. Box Sizing (BEST PRACTICE)

* {
  box-sizing: border-box;
}

✔ Includes padding + border inside width ✔ Makes layout easier

🧩 Real Example

<div class="box">Hello CSS Box Model</div>

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 20px;
}

🧠 What happens?

• Content = 200px width
• Padding adds inside space
• Border surrounds it
• Margin pushes it away from other elements

📊 Box Model vs Real Layout

⚠️ Common Mistakes

• Confusing margin vs padding ❌
• Forgetting box-sizing ❌
• Not understanding spacing behavior ❌
• Overusing margins everywhere ❌

🎯 Pro Tip

👉 Most modern websites ALWAYS use:

* {
  box-sizing: border-box;
}

✔ This prevents layout bugs

🧪 Mini Exercise

Create a page with:

1. A box with width 300px
2. Add padding 20px
3. Add border 3px solid
4. Add margin around it
5. Change background color