Le modèle de boite

Découverte du modèle de boîte avec margin, padding, border et box-sizing.

Comportement par défaut

Voici une première boîte sans aucune marge ni bordure.

Ajout de marges extérieures

Voici une boîte avec utilisation de margin.

Ajout de marges intérieures

Voici une boîte avec utilisation de padding.

Ajout d'une bordure

Voici une boîte avec utilisation de border.

Ajout d'une largeur

Voici une boîte avec utilisation de width + padding + border.

Utilisation du box-sizing: border-box

Voici une boîte avec utilisation de width + padding + border + box-sizing: border-box.