Cours CSS / Modèle de boîte : contenu, padding, bordure et margin

Le modèle de boîte CSS décrit la zone de contenu, le espacement intérieur, la bordure et la marge extérieure d'un élément. Ces zones affectent ses dimensions visibles et son espacement, tandis que les marges verticales adjacentes des blocs peuvent fusionner dans des conditions particulières.

Identifiez les quatre zones de la boîte

L'image ci-dessous montre les emplacements des quatre zones. Le texte ou les images sont placés à l'intérieur du contenu bleu, et un espacement intérieur (padding) jaune et une bordure verte entourent l'extérieur. La marge orange est à l'extérieur de la bordure. La couleur de l'image sert à distinguer la zone, et la couleur de fond de l'élément n'est pas peinte sur la marge elle-même.

Par défaut, une couleur de fond définie sur l’élément couvre le contenu et le padding et peut aussi apparaître derrière une bordure transparente. Le fond de l'élément n'est pas dessiné dans la zone de marge. Par conséquent, pour étendre la zone colorée de la carte, il faut augmenter le espacement intérieur, pas la marge. La distance à laquelle le fond est dessiné peut être modifiée avec une propriété distincte, mais le comportement par défaut est utilisé ici.

Calculer les largeurs déclarées et extérieures

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Pour un élément content-box régulier, width: 200px mesure le contenu. Ajouter 20px de padding et 2px de bordures de chaque côté produit une boîte de 244px. Les marges de 16px se situent à l’extérieur, faisant que l’espace horizontal incluant les deux marges est de 276px. Les marges verticales peuvent fusionner, donc n’appliquez pas cette simple addition à chaque cas vertical. Pour plus de détails, voir CSS Largeur, Hauteur, limites min/max et box-sizing.

Utilisez box-sizing: border-box pour inclure le padding et la bordure dans la largeur déclarée. Changer uniquement cette propriété dans cet exemple donne une boîte de 200px et une zone de contenu de 156px. La comparaison de dimension suivante mesure les mêmes cartes sous les deux règles de box-sizing. Voir MDN : Introduction.

Lire le raccourci d'espacement à une à quatre valeurs

Les valeurs de marge sont également spécifiées dans le même ordre. Si la valeur est deux, c'est en haut et en bas, à gauche et à droite, si elle est trois, c'est en haut, à gauche et à droite, en bas, et si elle est quatre, c'est dans le sens des aiguilles d'une montre depuis le haut. Si vous souhaitez uniquement changer certaines directions, utilisez des propriétés individuelles comme padding-top. Si vous réécrivez plus tard les propriétés abrégées, les valeurs individuelles spécifiées précédemment peuvent également changer, donc vérifiez l'ordre d'application.

padding-inline et margin-block sont des propriétés logiques basées sur la direction d'écriture du texte. En général, pour l'écriture horizontale de gauche à droite, inline correspond à gauche et droite, et block correspond à haut et bas, mais dans l'écriture verticale, la direction physique est différente. Cela ne signifie pas toujours une direction fixe horizontale ou verticale. Vous pouvez vérifier la correspondance des directions dans la description de margin-block de MDN.

Comprendre la fusion des marges verticales

Les marges verticales adjacentes dans un flux de bloc normal sont fusionnées conditionnellement en un seul espace. Cela s'appelle la fusion des marges. Les marges positives, lorsque la marge inférieure de l'élément précédent est de 20px et que la marge supérieure de l'élément suivant est de 30px, peuvent apparaître comme une valeur plus grande de 30px au lieu de 50px.

La fusion des marges ne combine pas les marges horizontales ni le padding, et les marges des éléments Flexbox et Grid ne s'effondrent pas comme les marges des blocs en flux normal. Les marges parent-enfant et les marges négatives introduisent d'autres conditions. Cet exercice compare délibérément uniquement les marges verticales positives entre deux blocs frères. Voir MDN : Fusion des marges.

Exécutez l'exemple et mesurez chaque zone

Enregistrez le code ci-dessous sous le nom box-model.html en UTF-8 et ouvrez-le. La première carte vérifie les quatre zones, et les deux lignes à l'intérieur de la boîte en pointillé servent à observer l'effondrement de la marge verticale. La dernière boîte montre le padding pour trois valeurs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. Dans les outils de développement, sous Elements, sélectionnez la .card et regardez l'affichage du modèle de boîte dans Styles ou Computed. Assurez-vous que le contenu fait 200px, que le padding à gauche et à droite est de 20px, que la bordure est de 2px et que la marge est de 16px.
2. Changez uniquement le padding à 30px. Le contenu restera à 200px et la largeur jusqu'à la bordure sera de 264px. Si vous revenez à 20px à l'origine et changez la marge à 32px, la largeur de la carte elle-même restera de 244px et l'espacement environnant changera.
3. Regardez entre les deux lignes à l'intérieur de la boîte pointillée. Les marges verticales positives de 20px et 30px se combinent, ce qui donne un espacement de 30px. Si vous changez la marge inférieure de la première ligne à 40px, l'espacement devient 40px. Après comparaison, revenez à 20px.
4. Vérifiez que le padding inférieur de .three-values est de 30px, le supérieur de 10px et les côtés gauche et droit de 20px. Si vous supprimez les derniers 30px pour n'avoir que deux valeurs, le bas devient aussi 10px.

L'espacement qui diffère de ce qui est attendu peut se produire en raison de la marge par défaut du navigateur pour le p·h1, de sélecteurs à spécificité plus élevée ou de la fusion des marges. Tout d'abord, vérifiez la marge de chaque élément et modifiez-la une valeur à la fois. Les modifications temporaires dans les outils de développement disparaissent lorsque vous actualisez, et les modifications que vous enregistrez dans les fichiers doivent être annulées manuellement pour revenir à leurs valeurs d'origine.