📦 Day 13 — CSS Box Model, Padding, Borders & Margin

📦 Day 13 — Box Model, Padding, Borders & Margin

Welcome to Day 13! Every visual element on a webpage — text, image, or div — is a rectangular box. Understanding the **CSS Box Model** is key to creating precise and well-aligned layouts. This concept explains how content, padding, borders, and margins work together to determine the total size of an element.

🧩 1️⃣ The CSS Box Model

The box model consists of four layers:

• Content: The text, image, or content inside the element.
• Padding: Space between content and border.
• Border: Wraps the padding and content.
• Margin: Space outside the border.

div {
  width: 200px;
  padding: 20px;
  border: 5px solid green;
  margin: 15px;
}

Total element width = width + padding + border + margin.

📏 2️⃣ Padding — Inner Space

Padding adds space inside an element, between content and border.

p {
  padding: 20px;
  background-color: #e8f5e9;
}

You can use shorthand:

padding: 10px 20px 15px 25px; /* top, right, bottom, left */

🧱 3️⃣ Border — The Outline

Borders add visible lines around elements. You can set border width, style, and color.

div {
  border: 4px dashed #2e7d32;
  border-radius: 10px;
}

• border-style: solid, dashed, dotted, double
• border-radius: rounds the corners

🏞 4️⃣ Margin — Outer Space

Margins create space between elements, ensuring they don’t touch each other.

div {
  margin: 25px;
}

Like padding, margins can also use shorthand syntax:

margin: 10px 15px 20px 5px; /* top right bottom left */

🧮 5️⃣ Box Sizing Property

By default, width and height apply only to the content box. To include padding and border in the total width, use:

* {
  box-sizing: border-box;
}

This makes layouts easier to manage and consistent across browsers.

🎨 6️⃣ Visual Example

div {
  background-color: #c8e6c9;
  width: 200px;
  padding: 15px;
  border: 4px solid #2e7d32;
  margin: 20px;
}

🧠 7️⃣ Practice Task

1. Create a card-like box with border, padding, and margin.
2. Experiment with border-radius and colors.
3. Enable box-sizing: border-box; to compare differences.

🧮 Mini Quiz

• Q1: What is the difference between padding and margin?
• Q2: What does box-sizing: border-box; do?
• Q3: How do you round the corners of a border?

🎯 Summary

You now understand how the box model defines element dimensions and spacing. The next step will be learning **CSS Selectors (Day 14)**, where you’ll target elements precisely for complex styling.

← Prev Next →