Le modèle de boîte est un concept central en CSS qui définit comment les éléments HTML sont affichés sur une page web. Il décrit la manière dont les éléments HTML sont construits et comment l'espace est distribué autour d'eux.

Chaque élément HTML est considéré comme une boîte qui comprend, dans l'ordre :

Lorsque vous définissez des propriétés CSS telles que la largeur, la hauteur, les marges, les remplissages et les bordures pour un élément, ces propriétés sont appliquées au modèle de boîte de l'élément.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        font-size: 18px;
      }
      .cadre {
        background: #c0c0c0;
        width: 300px;
        height: 300px;
      }

      .with-padding {
        padding: 15px;
      }
      .with-border {
        border: 15px solid;
      }

      .with-margin {
        margin: 15px;
      }
      .with-margin-left-auto {
        margin-top: 15px;
        margin-left: auto;
      }
      .with-margin-right-auto {
        margin-right: auto;
        margin-top: 15px;
      }
      .with-margin-auto {
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
      }

      .full {
        background: #c0c0c0;
      }
      .conteneur {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h2>Largeur et hauteur</h2>
    <div class="cadre">
      Largeur : 300px;<br />
      Total : 300px;<br />
    </div>

    <h2>Avec padding</h2>
    <div class="cadre with-padding">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Total : 330px;<br />
    </div>
    <h2>Avec border</h2>
    <div class="cadre with-padding with-border">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Bordure gauche : 15px;<br />
      Bordure droite : 15px;<br />
      Total : 360px;<br />
    </div>

    <h2>Avec margin</h2>
    <div class="cadre with-padding with-border with-margin">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Bordure gauche : 15px;<br />
      Bordure droite : 15px;<br />
      Espace externe gauche : 15px;<br />
      Espace externe droite : 15px;<br />
      Total : 360px; (Les expaces externes ne "comptent" pas dans la taille)<br />
    </div>
    <div class="cadre with-padding with-border with-margin-left-auto">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Bordure gauche : 15px;<br />
      Bordure droite : 15px;<br />
      Espace externe gauche : Auto;<br />
      Total : 360px;<br />
    </div>
    <div class="cadre with-padding with-border with-margin-right-auto">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Bordure gauche : 15px;<br />
      Bordure droite : 15px;<br />
      Espace externe droite : Auto;<br />
      Total : 360px;<br />
    </div>
    <div class="cadre with-padding with-border with-margin-auto">
      Largeur : 300px;<br />
      Espace interne gauche : 15px;<br />
      Espace interne droit : 15px;<br />
      Bordure gauche : 15px;<br />
      Bordure droite : 15px;<br />
      Espace externe gauche : Auto;<br />
      Espace externe droite : Auto;<br />
      Total : 360px;<br />
    </div>

    <h1>Sur ce principe, comment centrer le contenu d'une page</h1>

    <div class="full">
      <div class="conteneur">
        <h1>Mon titre</h1>
        <p>
          mon paragraphe mon paragraphe mon paragraphe mon paragraphe mon
          paragraphe mon paragraphe mon paragraphe mon paragraphe mon paragraphe
          mon paragraphe mon paragraphe mon paragraphe mon paragraphe mon
          paragraphe mon paragraphe
        </p>
      </div>
    </div>
  </body>
</html>

<aside> 💡 Il est possible de modifier le comportement de la modèle de boite avec la propriété “box-sizing” : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

Ainsi, par défaut, en content-box, le padding et la bordure s’additionneront de la largeur. Mais si vous le modifiez en “border-box”. La largeur, les bordures et padding fusionneront.

</aside>