Podcast CSS – 001: le modèle Box
Supposons que vous ayez cette partie du code HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Ensuite, écrivez le code CSS suivant:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Le contenu se termine par une largeur de 142 pixels, au lieu des 100 pixels que vous avez spécifiés, et désolidarise de votre élément. Pourquoi ?
Le modèle "box" est l'un des piliers du CSS. Comprendre comment fonctionne le modèle "box", comment il est affecté par d'autres aspects du CSS et, surtout, comment le contrôler, peut vous aider à écrire du code CSS plus prévisible.
N'oubliez pas que tout ce qui s'affiche dans CSS est une zone, même s'il ne s'agit que de texte ou d'un élément border-radius qui le fait ressembler à un cercle.
Contenu et tailles
Le comportement des zones est différent en fonction de leur valeur display, des dimensions définies et du contenu qu'elles contiennent. Il peut s'agir de texte brut ou de zones
supplémentaires générées par des éléments enfants. Dans tous les cas, le contenu affecte
la taille de la zone par défaut.
Vous pouvez contrôler cela à l'aide du dimensionnement externe ou utiliser le dimensionnement intrinsèque afin de laisser le navigateur prendre des décisions à votre place en fonction de la taille du contenu.
Voici une démonstration élémentaire qui explique la différence:
La version de démonstration présente les mots "CSS is génial" dans une case aux dimensions fixes et avec une bordure épaisse. Étant donné que la largeur de la boîte est spécifiée, sa taille est externe.
Cela signifie qu'elle contrôle la taille de son contenu enfant. Cependant, le mot "super" est trop grand pour le cadre. Il déborde donc en dehors de la zone de bordure du cadre parent (nous y reviendrons plus tard). Une façon d'éviter ce dépassement consiste à permettre la taille intrinsèque de la boîte, soit en ne définissant pas la largeur, soit en définissant width sur min-content. Le mot clé min-content indique à la zone de ne faire que la largeur minimale intrinsèque de son contenu (le mot "super"). Cela permet à la zone de s'adapter parfaitement au texte.
Voici un exemple plus complexe qui montre l'impact des différents dimensionnements sur du contenu réel:
Activez ou désactivez le dimensionnement intrinsèque pour voir en quoi le dimensionnement externe vous donne plus de contrôle, tandis que le dimensionnement externe et intrinsèque donne plus de contrôle au contenu. Pour voir les effets, ajoutez quelques phrases de texte à la fiche. Lorsque cet élément utilise un dimensionnement externe, la quantité de contenu que vous pouvez ajouter avant son dépassement est limitée, mais cela ne se produit pas lorsque le dimensionnement intrinsèque est activé.
Par défaut, cet élément a un width et un height définis de 400px chacun.
Ces dimensions attribuent des limites strictes à tout l'élément à l'intérieur de l'élément, qui sont respectées, sauf si le contenu est trop volumineux pour le cadre. Vous pouvez voir cela en action en remplaçant la légende sous la photo de la fleur par quelque chose qui dépasse la hauteur de la boîte.
Terme clé: le dépassement se produit lorsque le contenu est trop volumineux pour la boîte dans laquelle il se trouve. Vous pouvez gérer la manière dont un élément gère le contenu de dépassement à l'aide de la propriété overflow.
Le passage au dimensionnement intrinsèque permet au navigateur de prendre des décisions à votre place en fonction de la taille du contenu de la zone. Cela réduit beaucoup moins le risque de dépassement, car la zone est redimensionnée avec son contenu.
N'oubliez pas 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 externe.
Les zones du modèle de boîte
Les cases sont composées de zones de modèles de boîte distinctes qui remplissent toutes un travail spécifique.
La zone de contenu est la zone dans laquelle se trouve le contenu. Le contenu peut contrôler la taille de son élément parent, il s'agit donc généralement de la taille 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 zone, son arrière-plan est visible dans l'espace qu'elle crée.
Si des règles de dépassement sont définies pour la zone, telles que overflow: auto ou overflow: scroll, les barres de défilement occupent également cet espace.
La zone de bordure entoure la zone de marge intérieure et 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 correspond à la limite de ce que vous pouvez voir.
La dernière zone, la zone de marge, correspond à l'espace autour de la zone, défini par la règle margin. Des propriétés telles que outline et box-shadow occupent également cet espace, car elles sont superposées à l'élément et n'affectent pas la taille de la zone. La modification du outline-width de la boîte de dialogue 200px sur une boîte n'a aucune incidence sur le bord de la bordure.
Une analogie utile
Le modèle en boîte est complexe à comprendre. Voici donc une analogie avec ce que vous avez appris jusqu'à présent.
Dans ce schéma, vous avez trois cadres photo montés l'un à côté de l'autre sur un mur. Les éléments de l'image encadrée correspondent au modèle de zone comme suit:
- La zone de contenu correspond à l'illustration.
- La boîte de marge intérieure est le panneau de montage blanc situé entre le cadre et le visuel.
- La zone de bordure correspond au cadre et constitue une bordure littérale pour l'œuvre.
- La zone de marge est l'espace entre les cadres.
- L'ombre occupe le même espace que la marge.
Déboguer le modèle de zone
Les outils de développement du navigateur permettent de visualiser les calculs du modèle de zone d'une zone sélectionnée, ce qui peut vous aider à comprendre son fonctionnement et son impact sur le site Web sur lequel vous travaillez.
Essayez dans votre propre navigateur:
- Accédez aux outils de développement.
- Sélectionnez un élément.
- Afficher le débogueur de modèles en boîte.
Contrôler le modèle de boîte
Pour comprendre comment contrôler le modèle de zone, vous devez d'abord comprendre ce qui se passe dans votre navigateur.
Chaque navigateur applique une feuille de style user-agent aux documents HTML pour définir l'apparence et le comportement des éléments s'ils n'ont pas de code CSS défini. Le CSS utilisé dans les feuilles de style user-agent varie d'un navigateur à l'autre, mais ils fournissent des valeurs par défaut raisonnables pour faciliter la lecture du contenu.
Une propriété de la feuille de style user-agent définit le display par défaut d'une zone. Par exemple, dans un flux normal, la valeur display par défaut d'un élément <div> est block, un <li> a une valeur display par défaut de list-item et un <span> a une valeur display par défaut de inline.
Un élément inline a 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.
Par défaut, un élément block remplit l'espace intégré disponible, tandis que les éléments inline et inline-block ne sont pas plus grands que leur contenu.
La feuille de style user-agent définit également box-sizing, qui indique à une zone comment calculer sa taille. Par défaut, tous les éléments utilisent le style user-agent suivant: 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.
Testez vos connaissances
Testez vos connaissances sur l'impact de la taille des modèles de zone sur les propriétés.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Selon vous, quelle sera la largeur de .my-box ?
200px serait correct si la case comporte box-sizing: border-box.
La largeur réelle de cette zone est de 260 pixels.
Comme le CSS utilise la valeur box-sizing: content-box par défaut, la largeur appliquée correspond à la largeur du contenu. padding et border sont ajoutés de part et d'autre. 200 pixels pour le contenu + 40 pixels de marge intérieure + 20 pixels de bordure donnent une largeur visible totale de 260 pixels.
Vous pouvez modifier cela en spécifiant le dimensionnement border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Ce modèle de zone alternatif indique au CSS d'appliquer width à la zone de bordure plutôt qu'à la zone de contenu. Cela signifie que nos border et padding sont intégrés. Par conséquent, lorsque vous définissez .my-box sur une largeur de 200px, il s'affiche en fait sur une largeur de 200px.
Découvrez comment cela fonctionne dans la démonstration interactive suivante. Lorsque vous activez/désactivez la valeur box-sizing, la zone bleue indique le CSS appliqué dans la zone.
*,
*::before,
*::after {
box-sizing: border-box;
}
Cette règle CSS sélectionne tous les éléments du document et 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.
Étant donné que 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 normaliseurs, comme celui-ci.