Lesson 7 • Intermediate Track
CSS Layouts & Box Model
Master the foundation of CSS layouts — every element is a box, and display controls behavior.
💡 Think of the Box Model Like a Picture Frame
Every HTML element is like a framed picture on a wall:
| Layer | Frame Analogy | CSS Property |
|---|---|---|
| Content | The actual photo/artwork | width, height |
| Padding | The mat/white space around the photo | padding |
| Border | The actual frame | border |
| Margin | Wall space between frames | margin |
Why This Lesson Matters
Most beginners think CSS is about colors and fonts. They are wrong.
Layout problems, broken designs, elements not aligning, weird spacing, mobile issues — 90% of these problems come from NOT understanding the Box Model and Display.
If you master this lesson:
- ✓ You will stop fighting CSS
- ✓ You will understand why things look wrong
- ✓ You will be able to fix layouts without guessing
The CSS Box Model (Most Important Concept)
Every single HTML element is a box.
Each box is made of four layers, from inside to outside:
- Content – the actual thing inside
- Padding – space inside the box
- Border – the edge of the box
- Margin – space outside the box
Box Model Visualization
See all four layers of the box model
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.box-demo {
/* CONTENT: The actual size */
width: 200px;
height: 100px;
background: #3b82f6;
/* PADDING: Space inside the border */
padding: 20px;
/* BORDER: The edge of the box */
border: 5px solid #22c55e;
/* MARGIN: S
...Padding (Space Inside the Box)
Padding creates space between the content and the border. Think of padding as breathing room inside the box.
Padding Examples
Different ways to apply padding
<!DOCTYPE html>
<html>
<head>
<title>Padding</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.demo {
background: #3b82f6;
color: white;
margin: 15px 0;
border: 2px solid #60a5fa;
}
.no-padding {
padding: 0;
}
.small-padding {
padding: 10px;
}
.large-padding {
padding: 30px;
}
.different-sides {
...Margin (Space Outside the Box)
Margin creates space OUTSIDE the element. It pushes other elements away.
Margin & Centering
Use margin for spacing and centering
<!DOCTYPE html>
<html>
<head>
<title>Margin</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
margin: 0;
}
.box {
background: #3b82f6;
padding: 20px;
color: white;
border-radius: 8px;
}
.with-margin {
margin: 20px;
}
.margin-bottom {
margin-bottom: 40px;
}
/* CENTERING with margin auto */
.centered {
m
...The box-sizing Fix (Industry Standard)
By default, width = content only. Padding + border get added ON TOP.
This breaks layouts! The fix: box-sizing: border-box
box-sizing: border-box
The industry standard fix for predictable sizing
<!DOCTYPE html>
<html>
<head>
<title>Box Sizing</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.container {
width: 300px;
background: #1e293b;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
/* DEFAULT: content-box (bad) */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #e
...CSS Display Property
The display property controls how an element participates in layout.
Display: block vs inline vs inline-block
See how different display values behave
<!DOCTYPE html>
<html>
<head>
<title>Display Property</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.section {
background: #1e293b;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
h2 { color: #3b82f6; margin-top: 0; }
/* BLOCK: Full width, stacks vertically */
.block-demo {
display: block;
background: #ef4444;
pad
...display: none vs visibility: hidden
Hiding Elements
Two different ways to hide content
<!DOCTYPE html>
<html>
<head>
<title>Hiding Elements</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.container {
display: flex;
gap: 10px;
margin: 20px 0;
}
.box {
background: #3b82f6;
padding: 20px;
border-radius: 8px;
color: white;
}
/* display: none - REMOVED from layout */
.hidden-display {
display: none;
...Practice Challenge
Build a card layout with:
- box-sizing: border-box on all elements
- Proper padding inside cards
- Margin between cards
- Centered container
Box Model Practice
Create a proper card layout using box model concepts
<!DOCTYPE html>
<html>
<head>
<title>Box Model Practice</title>
<style>
/* ALWAYS include this reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(180deg, #0f172a, #1e293b);
font-family: system-ui, sans-serif;
color: #e5e7eb;
min-height: 100vh;
padding: 40px 20px;
}
/* Centered container */
.container {
max-width: 800px;
margin: 0 auto;
}
...Key Takeaways
- ✓Every element is a box: content + padding + border + margin
- ✓Always use box-sizing: border-box
- ✓Block elements stack vertically, inline flows with text
- ✓Inline-block gives you the best of both worlds
- ✓Use margin: auto for horizontal centering
Sign up for free to track which lessons you've completed and get learning reminders.