Box-model

En CSS, chaque élément constituant une page est une boîte rectangulaire

Qu’il s’agisse d’un texte, d'une image ou encore de n’importe quel autre élément, une boîte rectangulaire l’englobe toujours. Ce concept est appelé le Box model 📦.

Par exemple, voici un extrait du site de Radio-Canada. Afin de démontrer que chaque élément est bel et bien une boite rectangulaire, une bordure jaune a été ajoutée en CSS à tous les éléments de ladite page.

La boite en CSS est constituée de 4 parties:

  1. Le contenu la zone de base définie par le texte/image ou encore le width et le height.
  2. La marge intérieure padding l’espace vide entre le contenu et sa bordure.
  3. La bordure border la bordure entourant l’élément.
  4. La marge extérieure margin l’espace entre la boîte et celles à proximité.

Par défaut, lorsque les propriétés width ou height sont attribuées à un élément, seules la largeur et la hauteur du contenu de l'élément sont impactées. Autrement dit, pour obtenir la dimension réelle de l'élément, il faut ajouter la marge intérieure (padding) et la bordure (border).

La marge extérieure n’affecte pas la dimension réelle d’un élément puisque cet espace se trouve à l’extérieur de celui-ci.

Par exemple, si le contenu d'un élément a une largeur 200px et une marge intérieure (padding) de 50px, sa dimension réelle est donc de 300px.

Valeur Propriété
200px width
50px padding-left
50px padding-right
300px Total
box-model box-model
EXERCICE Box-model - Marc Séguin Pour cet exercice, vous devez mettre en valeur des toiles de l’artiste peintre québécois Marc Séguin en ajoutant uniquement du CSS.
EXERCICE Box-model - Broforce Pour cet exercice, vous devez complétez en CSS une interface permettant à deux joueurs de sélectionner leurs personnages en mode versus à Broforce.