The box model
The browser lays out every element as a box with four layers: content, padding, border and margin. Apply one rule to a .card box, one line at a time, and watch each layer grow: width and height size the content, padding and border make the box bigger, and margin pushes the next box away. Add up the real size, then see how box-sizing: border-box makes width and height measure the whole box instead.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What are the four layers of a CSS box, from the inside out?
The content is in the middle. Padding wraps it, the border wraps the padding, and the margin sits outside the border.
02A box has width: 200px; padding: 20px; border: 10px solid; and the default box-sizing. How wide is it from border to border?
With the default content-box, width sizes only the content. Add padding and border on both sides: 10 + 20 + 200 + 20 + 10 = 260px.
03Which layer is always transparent, so the box's background never shows in it?
The background paints under the content, the padding and the border. The margin is empty space outside the border, so it is always see-through.
04You add box-sizing: border-box; to that same box (width 200px, padding 20px, border 10px). What changes?
With border-box, width measures to the outside of the border. Padding and border fit inside it: 200 − 20 − 20 − 10 − 10 = 140px of content. The margin still sits outside.
05The card is 180px tall from border to border. What does margin: 30px; do to the box that comes after it?
Margin is transparent space outside the border that pushes other boxes away. 30px above the card plus 180px of card plus 30px below it: 30 + 180 + 30 = 240px.
Glossary
- Box model
- The way CSS lays out every element: a rectangle made of content, padding, border and margin.
- Content area
- The innermost part of a box, where text and images go.
- Padding
- Space inside the box, between the content and the border. The box's background fills it.
- Border
- A line drawn around the padding. It has a width, a style (such as solid) and a colour.
- Margin
- Transparent space outside the border that keeps other boxes away.
- box-sizing
- Decides what width and height measure: the content only (content-box, the default) or everything up to the outside of the border (border-box).
- Shorthand
- One property that sets several others at once, such as padding: 20px; for all four sides.
Notes and sources
- A real browser applies all of a rule's declarations at once. The figure applies them one at a time so you can see what each one does.
- padding: 20px and margin: 30px are shorthands that set all four sides (top, right, bottom and left). border: 10px solid sets the width, style and colour of all four sides; the colour you leave out is currentcolor, the text colour.
- The full style.css also has .parent { width: 360px; border: 2px solid; }. The parent's border keeps the card's top margin inside it; without a border or padding, a child's top margin can pass through its parent's edge (margin collapsing, a later topic).
- The parent is 360px wide, wider than the card needs. The card still starts at the left (its 30px margin in from the edge) and the rest of the line to its right stays empty; the figure draws only the 30px of margin you asked for on each side.
- Widths and depths in the drawing are to scale (the same number of drawing units for every CSS pixel); the layer heights are only there to show the layers. The next box is drawn 40px tall.
- Save the page as index.html and the CSS as style.css in the same folder and open it in a browser. The browser's developer tools show the box model of .card with the same numbers: content 140 × 60, padding 20, border 10 and margin 30.
Quiz Unlocks after the last step.