Des styles CSS en boîtes

Les éléments présentés sur une page web peuvent être considérés comme s'ils étaient inclus dans des boîtes. Celles-ci présentent un certain nombre de zones autour de leur contenu :

• un espacement (padding, en anglais)
• une bordure (border, en anglais)
• une marge (margin, en anglais)

Le contenu de la boîte (texte ou image) est caractérisé par ses dimensions (largeur : width et hauteur : height).

La bordure est un élément qui peut être coloré et qui entoure le contenu de la boîte.

La zone située à l'intérieur de la bordure est appelé espacement.

La zone à l'extérieur de la bordure et qui sépare l'objet de tout autre élément voisin est la marge.

On peut donc voir une boîte comme un rectangle de cellophane transparente qui supporterait un autre rectangle coloré (le contenu) muni d'une bordure.

---

Quand tu visualises parfaitement les différentes zones d'une boîte, passe à la page suivante.