🧠 Module 6

The CSS Box Model

Objective: Understand how every element is a rectangular “box” and learn to control size, spacing, and borders precisely.

🧩 1. What Is the Box Model?

Every visible element is composed of Content → Padding → Border → Margin.

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

⚙️ 2. The Four Layers Explained

Property	Description	Example
Content	The actual text or image inside the element	`width`, `height`
Padding	Space between content and border	`padding: 20px;`
Border	Outline around the element	`border: 2px solid #000;`
Margin	Space outside the border (between elements)	`margin: 20px;`

📐 3. Basic Example

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #0E477B;
  margin: 15px;
  background-color: #f5f5f5;
}

Renders a 300px content box with inner padding, blue border, and outer margin.

🧱 4. Box Sizing

By default, width targets only the content area. Include padding and borders with:

* {
  box-sizing: border-box;
}

✅ Best practice: Use globally. Layout math gets much simpler.

🧩 5. Display Property (Block vs Inline)

Display	Behavior	Example
`block`	Starts on a new line; full width	`<div>`, `<p>`, `<section>`
`inline`	Flows within text; width is content	`<span>`, `<a>`, `<img>`
`inline-block`	Inline flow + box properties	Often used for buttons, badges
`none`	Element not rendered	Used for toggles/modals

Example

span {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #333;
}

🧮 6. Margin and Padding Shorthand

/* Top, Right, Bottom, Left */
margin: 10px 20px 15px 5px;

/* Top/Bottom, Left/Right */
padding: 10px 20px;

/* All sides equal */
margin: 20px;

💡 DevTools (F12) → “Elements” → “Box Model” visualizes spacing live.

🧩 7. Borders and Rounded Corners

div {
  border: 3px dashed #6EC1E4;
  border-radius: 10px;
}

Common styles: solid, dashed, dotted, double, none.

💻 8. Hands-On Practice

✅ Exercise 1: Create a “Card” Layout

<div class="card">
  <h2>StreetGeek Course</h2>
  <p>Learn HTML, CSS, and PHP step-by-step.</p>
</div>

.card {
  background-color: #ffffff;
  border: 2px solid #0E477B;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  width: 300px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

💡 Tweak padding and margin to feel the difference.

✅ Exercise 2: Side-by-Side Boxes

.box {
  display: inline-block;
  width: 45%;
  margin: 2%;
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ccc;
}

Box A

Box B

🧠 9. Common Box Model Pitfalls

Margin vs Padding: Margin is outside; padding is inside.
Forgetting box-sizing: Use border-box for simpler widths.
Inline spacing gaps: Inline-block leaves whitespace. Use font-size:0 on parent (then reset on children) if needed.

🔎 10. Quiz Time

What is the difference between margin and padding?
What does box-sizing: border-box do?
Which property controls space outside the border?
What CSS rule hides an element from view?
What property creates rounded corners?

🚀 Challenge Task

Create a “Course Info Card Grid” with:

Each card has a title (<h3>), description, border, padding, rounded corners, and shadow.
Display 3 cards side-by-side with margin gaps.
Hover effect that scales the card slightly.

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card-grid .card{
  background:#fff; border:2px solid #0E477B; border-radius:12px;
  padding:18px; box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition:transform .3s ease;
}
.card-grid .card:hover{ transform:scale(1.05); }

🏁 Module 6 Summary

How the CSS Box Model works
Margin, padding, and border differences
Display properties and when to use them
Consistent sizing with border-box
Card-style layouts with spacing + shadows

Next up: 👉 MODULE 7: Layout with Flexbox & Grid — build responsive, multi-column layouts.