Let’s begin with Lecture 17 of the HTML5 & CSS3 series. Understanding the CSS Box Model – Margin, Padding, Border. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what the CSS Box Model is
- Know how
margin,padding, andborderwork together - Be able to control spacing around elements
- Style a card layout using the box model
- Make your webpage look neat and well-spaced!
📦 What Is the Box Model?
Every element on a webpage is a box. The Box Model helps us understand how space is calculated for each box.
Think of it like this:
Imagine wrapping a gift — the present is the content, the wrapping paper is padding, the box is the border, and the space between boxes is margin.
🔍 The Four Parts of the Box Model
| Part | Description |
|---|---|
| Content | The actual text or image inside the box |
| Padding | Space between content and border (inside the box) |
| Border | Line that wraps around the padding and content |
| Margin | Space outside the border, between elements |
Visual structure:
+----------------------------+
| Margin |
| +------------------+ |
| | Border | |
| | +------------+ | |
| | | Padding | | |
| | | +--------+ | | |
| | | |Content | | | |
| | | +--------+ | | |
| | +------------+ | |
| +------------------+ |
+----------------------------+📏 How It Affects Size
If you set:
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}The total width becomes:
200px (content) + 40px (left & right padding) + 10px (left & right border) = 250pxMargin doesn’t affect the size of the box itself, but it affects spacing from other elements.
🖌️ Using Margin, Padding, and Border
margin
Controls space outside the element.
margin: 10px; /* all sides */
margin: 10px 20px; /* top/bottom, left/right */
margin: 10px auto; /* center an element horizontally */padding
Controls space inside the element, between content and border.
padding: 15px;
padding: 10px 20px 10px 20px; /* top, right, bottom, left */border
Adds a line around the element.
border: 2px solid red;
border-top: 1px dashed blue;💻 Try This: Build a Simple Card Layout
Let’s create a new HTML file that shows off a styled card using the box model.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
card-layout.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
padding: 40px;
}
.card {
width: 300px;
background-color: white;
padding: 20px;
border: 2px solid #ddd;
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card h2 {
margin-top: 0;
}
.card p {
margin-bottom: 0;
}
</style>
</head>
<body>
<h1>My First Card</h1>
<div class="card">
<h2>Hello, World!</h2>
<p>This is a simple card made using CSS box model properties.</p>
</div>
<div class="card">
<h2>Welcome to My Site</h2>
<p>I'm learning about margins, padding, and borders. It's fun!</p>
</div>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a clean, centered card layout using margin, padding, and border!
🧪 Try It Yourself!
- Increase the padding of one card and see how it affects the layout.
- Give one card a different border color and thickness.
- Use
margin: 0 autoto center another element on the page. - Try removing the border from one card and notice the difference.
🚀 Next Lecture Preview:
In Lecture 18, we’ll learn how to control element display types, including block, inline, and inline-block — So you can decide how elements behave and interact on your page!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
