Aller au contenu

Aide CSS : Les blocs et le box-sizing

1. Les blocs en CSS

En CSS, chaque élément HTML est représenté comme une boîte rectangulaire.
Cette boîte est composée de plusieurs couches :

  1. Content : le contenu (texte, image, etc.)
  2. Padding : l’espace entre le contenu et la bordure
  3. Border : la bordure autour de l’élément
  4. Margin : l’espace entre l’élément et les autres éléments

Représentation :

+---------------------------+
|        Margin             |
|  +---------------------+  |
|  |      Border         |  |
|  |  +--------------+   |  |
|  |  |   Padding    |   |  |
|  |  | +---------+  |   |  |
|  |  | | Content |  |   |  |
|  |  | +---------+  |   |  |
|  |  +--------------+   |  |
|  +---------------------+  |
+---------------------------+

2. Le rôle de box-sizing

L’attribut box-sizing définit comment la largeur (width) et la hauteur (height) d’un élément sont calculées.

Valeurs principales :

  • content-box (valeur par défaut)
    La taille (width et height) ne prend en compte que le contenu.
    Le padding et la border s’ajoutent donc à la taille totale.

  • border-box
    La taille (width et height) inclut le contenu + padding + border.
    Cela évite que l’élément « déborde » et facilite la mise en page.

3. Exemple comparatif

Avec content-box (par défaut)

div {
  width: 100rem;
  padding: 1.5rem;
  border: 0.5rem solid black;
}

➡️ Taille totale = 100rem (contenu) + 1.5rem (padding) + 0.5rem (border) = 102 rem.

Avec border-box

div {
  width: 100rem;
  padding: 1.5rem;
  border: 0.5rem solid black;
}

➡️ Taille totale = 100rem (inclut contenu + padding + border).

4. Bonne pratique

Il est courant d’appliquer box-sizing: border-box; à tous les éléments pour simplifier la gestion des tailles et assurer un site réactif en conservant les bonnes proportions :

* {
  box-sizing: border-box;
}