The CSS Podcast – 001 : The Box Model
Imaginons que vous ayez cet extrait de code HTML :
<p>I am a paragraph of text that has a few words in it.</p>
Vous écrivez ensuite ce CSS :
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Le contenu finit par avoir une largeur de 142 px au lieu des 100 px que vous avez spécifiés, et il sort de votre élément. Pourquoi ?
Le modèle de boîte est un élément fondamental du CSS. Comprendre le fonctionnement du modèle de boîte, son influence sur d'autres aspects du CSS et, surtout, la façon dont vous pouvez le contrôler peut vous aider à écrire un code CSS plus prévisible.
Il est important de se rappeler que tout ce qui est affiché par CSS est une boîte, même s'il s'agit simplement de texte ou si un border-radius lui donne l'apparence d'un cercle.
Contenu et taille
Les boîtes ont un comportement différent en fonction de leur valeur display, de leurs dimensions définies et du contenu qu'elles contiennent. Ce contenu peut être du texte brut ou davantage de boîtes générées par des éléments enfants. Dans les deux cas, le contenu affecte la taille de la boîte par défaut.
Vous pouvez contrôler cela à l'aide du dimensionnement extrinsèque ou du dimensionnement intrinsèque pour laisser le navigateur prendre des décisions pour vous en fonction de la taille du contenu.
Voici une démo de base qui explique la différence :
La démo affiche les mots "CSS is awesome" (CSS, c'est génial) dans une boîte aux dimensions fixes et avec une bordure épaisse. La boîte ayant une largeur spécifiée, sa taille est extrinsèque.
Cela signifie qu'il contrôle la taille de son contenu enfant. Toutefois, le mot "awesome" est trop long pour la boîte et déborde donc de la border box de la boîte parente (nous y reviendrons plus tard). Pour éviter ce débordement, vous pouvez laisser la boîte être dimensionnée de manière intrinsèque en ne définissant pas la largeur ou, dans ce cas, en définissant width sur min-content. Le mot clé min-content indique à la boîte d'être aussi large que la largeur intrinsèque minimale de son contenu (le mot "awesome"). Cela permet à la boîte de s'adapter parfaitement au texte.
Voici un exemple plus complexe qui montre l'impact de différentes tailles sur le contenu réel :
Activez et désactivez le dimensionnement intrinsèque pour voir comment le dimensionnement extrinsèque vous offre plus de contrôle et comment le dimensionnement intrinsèque donne plus de contrôle au contenu. Pour voir les effets, ajoutez quelques phrases à la fiche. Lorsque cet élément a une taille extrinsèque, la quantité de contenu que vous pouvez ajouter avant qu'il ne déborde est limitée. Ce n'est pas le cas lorsque la taille intrinsèque est activée.
Par défaut, cet élément comporte un ensemble width et height de 400px chacun.
Ces dimensions définissent des limites strictes pour tout ce qui se trouve à l'intérieur de l'élément, qui sont respectées sauf si le contenu est trop grand pour la boîte. Vous pouvez le constater en modifiant la légende sous l'image de la fleur pour qu'elle dépasse la hauteur de la boîte.
Terme clé : le contenu dépasse de son conteneur lorsqu'il est trop volumineux. Vous pouvez gérer la façon dont un élément gère le contenu en trop à l'aide de la propriété overflow.
Passer au dimensionnement intrinsèque permet au navigateur de prendre des décisions pour vous en fonction de la taille du contenu de la boîte. Cela rend le dépassement beaucoup moins probable, car la boîte est redimensionnée en fonction de son contenu.
Il est important de se rappeler que le dimensionnement intrinsèque est le comportement par défaut du navigateur et qu'il offre généralement beaucoup plus de flexibilité que le dimensionnement extrinsèque.
Zones du modèle de boîte
Les boîtes sont constituées de zones distinctes du modèle de boîte, qui ont toutes une fonction spécifique.
La zone de contenu est l'espace dans lequel le contenu est affiché. Le contenu peut contrôler la taille de son parent. Il s'agit donc généralement de la zone dont la taille est la plus variable.
La zone de marge intérieure entoure la zone de contenu et correspond à l'espace créé par la propriété padding.
Comme la marge intérieure se trouve à l'intérieur de la boîte, l'arrière-plan de la boîte est visible dans l'espace qu'elle crée.
Si des règles de dépassement sont définies pour la boîte, telles que overflow: auto ou overflow: scroll, les barres de défilement occupent également cet espace.
La border box entoure la padding box. Son espace est défini par la valeur border, qui crée un cadre visuel pour l'élément. La bordure de l'élément est la limite de ce que vous pouvez voir.
La dernière zone, la zone de marge, est l'espace autour de votre boîte, défini par la règle margin de la boîte. Les propriétés telles que outline et box-shadow occupent également cet espace, car elles sont peintes au-dessus de l'élément et n'affectent pas la taille de la boîte. Modifier la outline-width de 200px d'une boîte ne change rien à l'intérieur de la bordure.
Une analogie utile
Le modèle de boîte est complexe à comprendre. Voici donc une analogie pour ce que vous avez appris jusqu'à présent.
Dans ce schéma, trois cadres photo sont montés les uns à côté des autres sur un mur. Les éléments de l'image encadrée correspondent au modèle de boîte comme suit :
- La zone de contenu correspond à l'illustration.
- La marge intérieure est la planche de montage blanche, entre le cadre et l'œuvre d'art.
- La boîte de bordure est le cadre qui fournit une bordure littérale pour l'illustration.
- La boîte de marge est l'espace entre les cadres.
- L'ombre occupe le même espace que la marge.
Déboguer le modèle de boîte
Les outils de développement du navigateur fournissent une visualisation des calculs du modèle de boîte d'une boîte sélectionnée, ce qui peut vous aider à comprendre comment fonctionne le modèle de boîte et comment il affecte le site Web sur lequel vous travaillez.
Pour essayer cette fonctionnalité dans Chrome :
- Ouvrez les outils pour les développeurs.
- Sélectionnez un élément.
- Afficher le débogueur du modèle de boîte.
Contrôler le modèle de boîte
Pour comprendre comment contrôler le modèle de boîte, vous devez d'abord comprendre ce qui se passe dans votre navigateur.
Chaque navigateur applique une feuille de style d'agent utilisateur aux documents HTML. La feuille de style définit l'apparence et le comportement des éléments si aucun CSS n'est défini pour eux. Le CSS des feuilles de style de l'agent utilisateur varie selon le navigateur, mais chaque navigateur possède des valeurs par défaut qui facilitent la lecture du contenu.
La feuille de style de l'agent utilisateur définit la valeur par défaut des éléments qui prennent display. Par exemple, la valeur display par défaut d'un élément <div> est block, celle d'un élément <li> est list-item et celle d'un élément <span> est inline.displaydisplay
Un élément inline possède une marge de bloc, mais les autres éléments ne la respectent pas.
Avec inline-block, les autres éléments respectent la marge de bloc, mais le premier élément conserve la plupart des comportements qu'il avait en tant qu'élément inline.
Un élément block remplit l'espace en ligne disponible par défaut, tandis que les éléments inline et inline-block ne sont pas plus grands que leur contenu.
La feuille de style de l'agent utilisateur définit également des valeurs par défaut pour box-sizing, qui indique à une boîte comment calculer sa taille. Par défaut, tous les éléments sont définis sur box-sizing: content-box;. Cela signifie que lorsque vous définissez des dimensions telles que width et height, elles s'appliquent à la zone de contenu. Si vous définissez ensuite padding et border, ces valeurs sont ajoutées à la taille de la zone de contenu.
Vérifier que vous avez bien compris
Testez vos connaissances sur les propriétés qui ont un impact sur la taille du modèle de boîte.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Quelle sera la largeur de .my-box, selon vous ?
200px serait correct si la boîte contenait box-sizing: border-box.
La largeur réelle de cette boîte est de 260 px.
Étant donné que le CSS utilise la valeur par défaut box-sizing: content-box, la largeur appliquée correspond à la largeur du contenu, à laquelle sont ajoutées les marges padding et border de chaque côté. 200 px pour le contenu + 40 px de marge intérieure + 20 px de bordure donnent une largeur visible totale de 260 px.
Vous pouvez modifier ce paramètre en spécifiant la taille border-box :
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Ce modèle de boîte alternatif indique au CSS d'appliquer width à la boîte de bordure plutôt qu'à la boîte de contenu. Cela signifie que nos border et padding sont insérés. Ainsi, lorsque vous définissez .my-box sur une largeur de 200px, il est en fait affiché sur une largeur de 200px.
Découvrez comment cela fonctionne dans la démo interactive suivante. Lorsque vous activez ou désactivez la valeur box-sizing, la zone bleue indique le CSS appliqué à l'intérieur de la boîte.
*,
*::before,
*::after {
box-sizing: border-box;
}
Cette règle CSS sélectionne chaque élément du document, ainsi que chaque pseudo-élément ::before et ::after, et applique box-sizing: border-box.
Cela signifie que chaque élément utilise désormais ce modèle de boîte alternatif.
Comme le modèle de boîte alternatif peut être plus prévisible, les développeurs ajoutent souvent cette règle aux réinitialisations et aux normalisateurs, comme celui-ci.