Let’s move on to Lesson 6 – an essential concept in CSS that every frontend developer must understand:
📘 LESSON 6: CSS Box Model – Understanding Spacing
✅ Learning Goals:
- Understand how every HTML element is treated as a box
- Learn the four parts of the CSS box model
- Visualize spacing: content, padding, border, and margin
- Practice adjusting spacing and layout
🧾 Lesson Content (Text for Website)
📦 What is the CSS Box Model?
In CSS, every element is a box.
This box has layers:
+-----------------------------+
| margin |
| +-----------------------+ |
| | border | |
| | +-----------------+ | |
| | | padding | | |
| | | +-----------+ | | |
| | | | content | | | |
| | | +-----------+ | | |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+
🧱 The Four Layers:
- Content – The actual text or image
- Padding – Space between content and border
- Border – The outline around the element
- Margin – Space outside the element (between it and others)
🧪 Example: Box Model in Action
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #ff6f00;
margin: 30px;
background-color: #ffe0b2;
}
</style>
</head>
<body>
<div class="box">This is a box with padding, border, and margin.</div>
</body>
</html>
💡 Save this as lesson6.html and test it in your browser.
📏 Box Model Math
Total Width =width + left/right padding + left/right border + left/right margin
Total Height =height + top/bottom padding + top/bottom border + top/bottom margin
🔍 DevTools Tip
Open your page in Chrome or Firefox
Right-click → Inspect → Click the box element →
Look in Computed → You’ll see a box diagram showing spacing
🧪 Practice Task
✅ Create a card with:
- 250px width
- 20px padding
- 10px solid border
- 40px margin
- Add background color
📌 Quick Summary
- Every element in CSS is a box
- The box has content → padding → border → margin
- Understanding spacing is crucial for clean layouts
- Use DevTools to debug spacing visually
Join Our Telegram Channel
One Response