Understand the CSS box model, box-sizing, margins, padding, and borders
Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
Every element in CSS is essentially a box. Understanding the box model is fundamental to mastering CSS layout.
The box model describes how elements are sized and spaced, consisting of four layers from inside to outside:
- Content - The actual content (text, images)
- Padding - Space between content and border
- Border - The edge around the padding
- Margin - Space outside the border
In this unit, you’ll learn how to control each layer to create precise layouts.
Lessons in this unit:
| 0: | ▶︎ Introduction |
| 1: | Understanding the CSS Box Model |
| 2: | How to Use CSS Box Sizing |
| 3: | How to Use CSS Margin |
| 4: | How to Use CSS Padding |
| 5: | How to Style CSS Borders |