Chaque élément est une boîte

Chaque élément est une boîte rectangulaire, faite de quatre couches, de l'intérieur vers l'extérieur :

margin    ┌──────────────────────────┐   espace AUTOUR de la boîte
border    │ ┌──────────────────────┐ │   le trait qui l'entoure
padding   │ │ ┌──────────────────┐ │ │   espace entre le trait et le contenu
contenu   │ │ │   texte, images  │ │ │
          │ │ └──────────────────┘ │ │
          │ └──────────────────────┘ │
          └──────────────────────────┘

Les raccourcis

margin et padding acceptent une à quatre valeurs, dans le sens des aiguilles d'une montre en partant du haut :

padding: 16px;                 /* les quatre côtés */
padding: 8px 16px;             /* haut et bas, gauche et droite */
margin: 0 auto 24px;           /* haut, gauche et droite, bas */
margin: 1px 2px 3px 4px;       /* haut, droite, bas, gauche */

margin: 0 auto centre horizontalement un élément de largeur fixée.

border réunit épaisseur, style et couleur, dans n'importe quel ordre :

border: 1px solid #cccccc;
border-radius: 8px;            /* coins arrondis */

box-sizing

Par défaut, width ne compte que le contenu : une boîte de width: 300px avec 16px de marge intérieure et 1px de bordure mesure en réalité 334px. Source d'innombrables débordements.

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

Avec border-box, width inclut marge intérieure et bordure : 300px veut dire 300px. Presque tous les sites commencent par cette règle. Comme box-sizing ne s'hérite pas, elle vise tous les éléments avec *.