Docs CSS exécutables : Modèle de boîte

Q: Que fait box-sizing: border-box ?

Il fait inclure le padding et la bordure dans width et height. Une boîte avec width: 200px, padding: 20px et une bordure de 5px fait alors exactement 200px de large, et la zone de contenu se réduit à 150px pour tenir. La valeur par défaut, content-box, ajoute le padding et la bordure par-dessus, ce qui donne 250px.

Q: Comment se calcule la largeur totale d'un élément ?

Avec content-box (par défaut) : width + padding gauche et droit + bordure gauche et droite. Avec border-box : seulement width. Dans les deux cas, la margin est à l'extérieur de la boîte : elle s'ajoute à l'espace occupé par l'élément, pas à sa propre largeur.

Q: Faut-il mettre box-sizing: border-box partout ?

La plupart des projets le font, avec , ::before, *::after { box-sizing: border-box; } en haut de la feuille de style. Les largeurs en pourcentage et le padding s'additionnent alors comme on s'y attend, et des frameworks comme Bootstrap et Tailwind livrent la même remise à zéro.

Les quatre couches de chaque boîte

Chaque élément d'une page est dessiné comme un rectangle fait de quatre couches, de l'intérieur vers l'extérieur :

Contenu : le texte, l'image ou les éléments enfants, dimensionnés par width et height.
Padding : l'espace à l'intérieur de la boîte, entre le contenu et la bordure. Il affiche le fond de l'élément.
Bordure : la ligne autour du padding.
Margin : l'espace à l'extérieur de la bordure, qui éloigne les autres boîtes. Toujours transparente.

Dans l'exemple, chaque couche a sa couleur : contenu bleu, padding vert, bordure foncée, et une zone ambre autour de la boîte qui représente la margin (dessinée par un conteneur, car une margin est elle-même transparente).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

La ligne sous la boîte est mesurée par le navigateur : 160 + 20 + 20 + 10 + 10 = 220px. La margin ajoute encore 24px de chaque côté, mais elle est à l'extérieur de la boîte et ne fait donc pas partie des 220.

Le calcul de la largeur : content-box ou border-box

Par défaut (box-sizing: content-box), width ne règle que le contenu. Le padding et la bordure s'ajoutent par-dessus, et la boîte finit plus large que le nombre écrit. Avec box-sizing: border-box, width désigne toute la boîte, et le contenu rétrécit pour laisser la place au padding et à la bordure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (par défaut)	`border-box`
`width` désigne	Le contenu	Contenu + padding + bordure
`width: 200px; padding: 20px; border: 5px`	250px de large	200px de large
Zone de contenu dans ce cas	200px	150px
Margin	À l'extérieur, non comptée	À l'extérieur, non comptée

La remise à zéro border-box

Comme border-box rend les tailles cohérentes, presque toutes les feuilles de style modernes commencent par cette règle :

*,
*::before,
*::after {
  box-sizing: border-box;
}

Elle compte surtout avec les pourcentages. Deux colonnes width: 50% avec du padding ne tiennent pas sur une ligne en content-box, car chacune fait 50 % plus son padding :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Les commentaires HTML suppriment l'espace entre les colonnes inline-block, qui ajouterait sinon quelques pixels.)

Voir le modèle de boîte dans les DevTools

Tous les navigateurs dessinent le modèle de boîte pour vous. Faites un clic droit sur un élément, choisissez Inspecter, puis ouvrez l'onglet Calculé (Mise en page dans Firefox) : un schéma montre la taille du contenu au centre, entourée des valeurs de padding, de bordure et de margin. Survoler un élément dans le panneau Éléments colore aussi la page : contenu en bleu, padding en vert, margin en orange.

Les boîtes inline suivent d'autres règles

Le modèle de boîte ci-dessus décrit les boîtes de type bloc comme <div> et <p>. Les éléments inline comme <span>, <a> et <strong> s'insèrent dans une ligne de texte et traitent l'espace vertical différemment :

Propriété	Sur un élément inline
`width`, `height`	Ignorées
Padding, bordure et margin horizontaux	Appliqués, et repoussent les voisins sur les côtés
Padding et bordure verticaux	Dessinés, mais ne repoussent pas les lignes au-dessus et en dessous
Margin verticale	Ignorée

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block donne à un élément placé dans une ligne le modèle de boîte complet : sa largeur, sa hauteur, son padding et sa margin occupent tous de la place. Voir padding CSS et margin CSS pour chaque couche en détail.

Erreurs courantes

Ajouter du padding à une boîte de largeur fixe et s'étonner qu'elle grandisse. En content-box, le padding et la bordure s'ajoutent à width. Utilisez border-box.
S'attendre à ce que la margin prenne la couleur de fond. La margin est toujours transparente ; utilisez le padding pour un espace coloré.
Définir height ou une margin verticale sur un élément inline. Rien ne se passe ; utilisez display: inline-block ou block.
Oublier les bordures dans le calcul. Une bordure de 1px sur un élément width: 100% le rend 2px trop large en content-box, ce qui peut faire apparaître une barre de défilement horizontale.
Confondre margin et padding. En bref : le padding est à l'intérieur de la bordure, la margin à l'extérieur. La page margin vs padding les compare côte à côte.

Questions fréquentes

Qu'est-ce que le modèle de boîte CSS ?

La règle selon laquelle chaque élément s'affiche comme une boîte rectangulaire de quatre couches : le contenu, le padding autour, la bordure autour du padding et la margin à l'extérieur de la bordure. En CSS, la largeur, la hauteur et les espacements se règlent tous sur ces couches.

Que fait box-sizing: border-box ?

Il fait inclure le padding et la bordure dans width et height. Une boîte avec width: 200px, padding: 20px et une bordure de 5px fait alors exactement 200px de large, et la zone de contenu se réduit à 150px pour tenir. La valeur par défaut, content-box, ajoute le padding et la bordure par-dessus, ce qui donne 250px.

Comment se calcule la largeur totale d'un élément ?

Avec content-box (par défaut) : width + padding gauche et droit + bordure gauche et droite. Avec border-box : seulement width. Dans les deux cas, la margin est à l'extérieur de la boîte : elle s'ajoute à l'espace occupé par l'élément, pas à sa propre largeur.

La margin fait-elle partie du modèle de boîte ?

Oui, c'est la couche la plus externe, mais elle est toujours transparente et n'entre jamais dans la largeur ni dans le fond de l'élément. Elle ne fait qu'éloigner les boîtes voisines.

Faut-il mettre box-sizing: border-box partout ?

La plupart des projets le font, avec *, *::before, *::after { box-sizing: border-box; } en haut de la feuille de style. Les largeurs en pourcentage et le padding s'additionnent alors comme on s'y attend, et des frameworks comme Bootstrap et Tailwind livrent la même remise à zéro.

Concepts liés