CSS box model
This course covers the CSS box model: the rectangle every rendered element occupies and its four nested layers of content, padding, border and margin. It explains how box-sizing decides what width and height measure, how the padding and margin shorthands read one to four values, and how border width, style, color and radius work. It also covers negative margins, centering with margin auto and the rules of vertical margin collapsing. The final lesson builds a styled card that uses every layer.
What you'll learn
- ✓The four layers of the box model and how DevTools displays them
- ✓How content-box and border-box change width and height calculations
- ✓Padding and margin shorthands with one to four values, plus per-side properties
- ✓Border width, style, color and rounded corners with border-radius
- ✓Negative margins and horizontal centering with margin: 0 auto
- ✓When adjacent vertical margins collapse and when they do not
The box model, piece by piece
Round buttons, circular avatars and diagonal banners don't change the fact underneath. Every element a browser renders occupies a rectangular box. A <p>, a <button>, an <img> and a whole <article> each get a box. CSS's rules for sizing, spacing and positioning are rules about how that box behaves.…
Read the full lesson free →Curriculum
7 lessonsThe box model, piece by piece
Introduces content, padding, border and margin, how DevTools shows them, and why background color skips the margin.
box-sizing: content-box vs border-box
Compares content-box and border-box sizing and explains the universal border-box reset found at the top of stylesheets.
Padding: space inside the border
Covers padding shorthand value counts, per-side longhand properties, why padding cannot be negative, and padding on inline elements.
Border: the line between padding and margin
Explains the border shorthand, its required style, per-side borders, and rounding corners and circles with border-radius.
Margin: space outside the box
Shows margin shorthand and longhand properties, negative margins, and centering a block with margin auto and a width.
Margin collapsing
Describes how adjacent vertical margins merge into the larger value, where collapsing applies, and how to debug it.
Putting it together: a styled card
Builds a styled card with image, heading, text and button, reading each declaration against its box model layer.