CSS Box Model & Display
Lesson 6 • Beginner Track
What You'll Learn
💡 Think of It Like This
Imagine a picture frame: The picture itself is the content. The matting around the picture is the padding. The frame itself is the border. And the space between the frame and the wall (or other frames) is the margin.
| Box Layer | Picture Frame Analogy | CSS Property |
|---|---|---|
| Content | The picture itself | width / height |
| Padding | The matting around the picture | padding |
| Border | The frame itself | border |
| Margin | Space between frames on the wall | margin |
The CSS Box Model
Every HTML element is a rectangular box. The box model describes how the browser calculates the total size of each element.
Box Model Visualised
See how margin, padding, border, and content work together
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.box-demo {
/* Content: 200x100 */
width: 200px;
height: 100px;
/* Padding: space inside the border */
padding: 20px;
/* Border: the visible frame */
border: 5px solid #3b82f6;
/* Margin: space outside the border */
margin: 30px auto;
...box-sizing: border-box vs content-box
By default, width only sets the content width. Padding and border are added on top, making the element bigger than you expect. box-sizing: border-box fixes this by including padding and border inside the width.
content-box vs border-box
Compare how the same width behaves differently
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Comparison</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.container {
background: #1e293b;
width: 300px;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.content-box-demo {
box-sizing: content-box; /* default */
width: 300px;
padding: 20px;
border: 5px solid #ef4444;
...The display Property
The display property controls how an element flows in the page. The three most common values are block, inline, and inline-block.
| Value | Takes Full Width? | Width/Height Work? | Examples |
|---|---|---|---|
block | Yes — new line | ✅ Yes | div, p, h1–h6, section |
inline | No — same line | ❌ No | span, a, strong, em |
inline-block | No — same line | ✅ Yes | img, button, input |
block vs inline vs inline-block
See how display values change element behaviour
<!DOCTYPE html>
<html>
<head>
<title>Display Property</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
h3 { color: #22c55e; margin: 25px 0 8px; }
.block-demo div {
display: block;
background: #3b82f6;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
color: white;
}
.inline-demo span {
display: inline;
background: #8b5cf6;
pa
...⚠️ Common Mistakes
- Forgetting box-sizing: border-box — Without it, padding and border make elements larger than the width you set. Always add
*, *::before, *::after { box-sizing: border-box; }to your CSS. - Setting width/height on inline elements —
spanandaignore width and height. Usedisplay: inline-blockordisplay: blockfirst. - Collapsing margins — When two vertical margins touch, they collapse into one (the larger value wins). This doesn't happen with padding.
- Using margin for internal spacing — Use
paddingfor space inside an element; usemarginfor space between elements.
🎉 Lesson Complete
You now understand the CSS box model — the foundation of every layout on the web. Key takeaways:
- ✅ Every element has content → padding → border → margin
- ✅ Use
box-sizing: border-boxfor predictable sizing - ✅ block = full width + new line; inline = flows in text; inline-block = best of both
- ✅ Padding = space inside; Margin = space outside
Sign up for free to track which lessons you've completed and get learning reminders.