CSS layout is one of the most fundamental skills in frontend development, and it's where a lot of developers either click into confidence or quietly struggle for years.
The good news: CSS layout has three layers you can learn in order. Master each one, and you have everything you need to build real interfaces.
https://www.youtube.com/watch?v=rIO5326FgPE
Every element on a web page — a paragraph, a button, a navigation bar — is a rectangular box. The box model describes the four zones that make up that rectangle. Understanding it will explain why things are the size they are, why elements don't sit where you expect, and how to fix it when they don't.
┌─────────────────────────────────┐
│ MARGIN │ (space outside the element)
│ ┌───────────────────────────┐ │
│ │ BORDER │ │ (the visible edge)
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
.card {
width: 300px;
padding: 24px; /* space inside the box */
border: 2px solid #e2e8f0;
margin: 16px; /* space outside the box */
}
Here's something that trips up almost everyone. By default, CSS adds padding and border on top of the width you set. So this card is not 300px wide — it's 348px:
/* box-sizing: content-box (the default) */
.card {
width: 300px;
padding: 24px; /* adds 48px (24 × 2) */
border: 2px solid #ccc; /* adds 4px (2 × 2) */
/* actual width: 300 + 48 + 4 = 352px */
}
This is almost never what you want. The fix is box-sizing: border-box, which makes the width include padding and border:
/* box-sizing: border-box */
.card {
box-sizing: border-box;
width: 300px;
padding: 24px;
border: 2px solid #ccc;
/* actual width: exactly 300px. padding lives inside. */
}
The universal best practice is to set this globally so you never have to think about it:
/* Put this at the top of every CSS file you write */
*,
*::before,
*::after {
box-sizing: border-box;
}
<aside> ⚠️
If you forget box-sizing: border-box and wonder why your carefully-sized elements are overflowing their containers, this is almost certainly the cause. Make the global reset a habit from day one.
</aside>
Both margin and padding accept 1–4 values using the same shorthand pattern:
/* 1 value: all four sides */
margin: 16px;
/* 2 values: top/bottom, left/right */
margin: 8px 16px;
/* 4 values: top, right, bottom, left (clockwise from top) */
margin: 8px 16px 24px 16px;
You can also target individual sides:
.section-title {
margin-top: 32px;
margin-bottom: 8px;
padding-left: 16px;
}
Adjacent vertical margins collapse into one (the larger of the two wins). This only happens with vertical margins between block elements, not with padding.
.paragraph-a { margin-bottom: 24px; }
.paragraph-b { margin-top: 16px; }
/* The gap between them is 24px, not 40px */
<aside> 💡
Margin collapse is intentional: it's what makes body text readable without having to carefully balance every margin. But it can be surprising when margins inside a container "escape" to the outside. If you hit this, adding padding: 1px or overflow: hidden to the parent will prevent it.
</aside>
<aside> ⌨️
Hands On
Open the browser DevTools (F12) and inspect any element on a webpage. In the Elements panel, scroll to the bottom of the Styles pane. You'll see a visual diagram of the box model showing the exact computed values for margin, border, padding, and content. Try hovering over each zone in the diagram and watch the page highlight that region.
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*
Built with ❤️ by the HackYourFuture community · Thank you, contributors
Found a mistake or have a suggestion? Let us know in the feedback form.