The box model

Working from the inside out, each element has its content, then padding, then a border, then margin. Padding is space inside the border; margin is space outside it.

The one line to add to every project

By default, width applies to the content only, so padding and border make the box wider than you asked for. This rule makes width mean the full box, which makes layouts far easier to reason about.

*, *::before, *::after {
  box-sizing: border-box;
}

Shorthand order

Values go clockwise from the top: top, right, bottom, left. Two values mean top and bottom, then left and right.

.a { margin: 8px 16px 24px 32px; }
.b { margin: 8px 16px; }
.c { margin: 0 auto; } /* centres a block that has a width */