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:

• Le contenu la zone de base définie par le texte/image ou encore le width et le height.
• La marge intérieure padding l’espace vide entre le contenu et sa bordure.
• La bordure border la bordure entourant l’élément.
• 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).

Warning

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

Exercices

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.
Box-model - Marc Séguin

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.
Box-model - Broforce