Day 10: Master the CSS Box Model – Margin, Padding, Border Explained

📦 Day 10: CSS Box Model

Welcome to Day 10 of the 60-Day Web Development Series. Today, we’ll explore the CSS Box Model – the foundational concept behind layout, spacing, and positioning in CSS. Every element is a box, and understanding this box is key to designing clean and effective web interfaces.

---

🔍 What is the CSS Box Model?

The CSS Box Model describes how the size of every HTML element is determined and how it interacts with other elements. The model consists of:

• Content: The text or image inside the box
• Padding: Space between the content and the border
• Border: The line surrounding the padding
• Margin: The space outside the border, separating the element from others

🧱 CSS Example

.box {
  margin: 20px;
  padding: 15px;
  border: 2px solid #4b5563;
  background-color: #e0f2fe;
}

This is a styled box using margin, padding, and border.

🎯 Visual Breakdown

Here’s a mental model of the box structure (from outside in):

• Margin (outermost)
• Border
• Padding
• Content (innermost)

🧪 Practice Task

• Create a box using <div> and apply margin, border, and padding
• Use different units like px, rem, and %
• Inspect the layout using browser developer tools

🚀 What’s Next?

In Day 11, we dive into Flexbox – a modern and powerful layout system that simplifies complex alignments and distributions.

Day 11 - CSS Flexbox Layout