The Box Model

All in one: every box-model property, side by side

What this example compares

The four layers: content vs padding vs border vs margin, added one at a time
The same 26px, two jobs: padding: 26px (coloured) vs margin: 26px (see-through)
Border styles: solid vs dashed vs dotted vs double vs none, and border: 6px #E07B1E with the style missing
Which sides: border vs border-left, -top, -right, -bottom vs border-width + border-style + border-color, in any order
Round corners: border-radius 0 vs 8px vs 999px vs 50% on a square and on a wide box vs four values
Shadows: box-shadow none vs small vs big vs hard vs spread, and text-shadow
A line that takes space or not: border vs outline, and the focus outline vs outline: none
How many values: padding: 10px vs 10px 20px vs 10px 20px 30px vs 5px 10px 15px 20px (TRouBLe), and border-width: 2px 10px
One side by name: padding-top vs margin-left vs border-bottom-width vs the shorthand
How wide is it really: box-sizing: content-box (250px) vs border-box (200px), and * { box-sizing: border-box; }
The gap between two boxes: margins collapse vs the larger wins vs no collapse in a grid vs sideways margins vs a negative margin
Centring a box: margin: 0 auto with a width vs without one vs on a <span> vs with display: block vs text-align: center vs trying to centre vertically
Sizes: width vs max-width vs min-width vs height vs min-height vs height: auto
All of it in one real card: the project's course cards, every piece named

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels (scroll inside the result to reach them all). Panel 1 shows the same words getting a cream padding, then an orange border, then grey all round from the margin. Panel 3 shows five border styles and one box with no border at all because its style is missing. Panel 5 shows a square, a soft card, a pill, a circle, an oval and a leaf shape. In panel 7 chip C moves to the right only in the border row, not in the outline row. Panel 10 shows one box reaching the end of its 250px red line and one stopping 50px short. In panel 11 the gap between the two strips is one strip high in the first card and two strips high in the grid card. Panel 13 shows a bar that runs off the pretend phone and words spilling out of the fixed-height box, and panel 14 shows the two course cards from the project. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 12, why does the box in card 2 not move to the centre, even though it has margin: 0 auto exactly like card 1?

Card 2 has no width, so the box already fills the whole line and there is no leftover space for the two auto margins to share. Give it a width (or max-width) smaller than its parent, as card 1 does, and it moves to the centre.