Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 6: The CSS Box Model - SitesByYogi

🧠 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.