Le podcast CSS - 001 : Le modèle de boîte
Supposons que vous ayez ce code HTML :
<p>I am a paragraph of text that has a few words in it.</p>
Vous écrivez ensuite ce code CSS :
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Le contenu finit par avoir une largeur de 142 pixels au lieu des 100 pixels que vous avez spécifiés, et il dépasse de votre élément. Pourquoi ?
Le modèle de boîte est un élément fondamental du CSS. Comprendre son fonctionnement, son interaction avec 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 est affiché par le 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 dimensionnement
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 d'autres boîtes générées par des éléments enfants. Dans tous les cas, le contenu affecte la taille de la boîte par défaut.
Vous pouvez contrôler ce comportement à l'aide du dimensionnement extrinsèque ou du dimensionnement intrinsèque pour laisser le navigateur prendre des décisions en fonction de la taille du contenu.
Voici une démonstration de base qui explique la différence :
La démonstration contient les mots "CSS is awesome" dans une boîte aux dimensions fixes et avec une bordure épaisse. Comme la boîte a une largeur spécifiée, elle est dimensionnée de manière extrinsèque.
Cela signifie qu'elle contrôle le dimensionnement de son contenu enfant. Toutefois, le mot "awesome" est trop grand pour la boîte. Il déborde donc de la zone de bordure 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 la width sur min-content. Le mot clé min-content indique à la boîte de n'avoir que la largeur intrinsèque minimale de son contenu (le mot "awesome"). La boîte s'adapte ainsi parfaitement au texte.
Voici un exemple plus complexe qui montre l'impact des différents dimensionnements sur du 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 de texte à la fiche. Lorsque cet élément est dimensionné de manière extrinsèque, la quantité de contenu que vous pouvez ajouter avant qu'il ne déborde est limitée, mais cela ne se produit pas lorsque le dimensionnement intrinsèque est activé.
Par défaut, cet élément a une width et une height définies sur 400px chacune.
Ces dimensions limitent strictement 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 remplaçant la légende sous l'image de la fleur par un texte qui dépasse la hauteur de la boîte.
Terme clé : Un débordement se produit lorsque le contenu est trop grand pour la boîte dans laquelle il se trouve. Vous pouvez gérer la façon dont un élément gère le contenu en débordement à l'aide de la propriété overflow.
Le passage au dimensionnement intrinsèque permet au navigateur de prendre des décisions en fonction de la taille du contenu de la boîte. Le débordement est alors beaucoup moins probable, car la boîte est redimensionnée en fonction de 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 extrinsèque.
Les zones du modèle de boîte
Les boîtes sont composées de zones de modèle de boîte distinctes, chacune ayant une fonction spécifique.
La zone de contenu est la zone dans laquelle le contenu se trouve. 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ébordement sont définies pour la boîte, 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
border valeur, qui
crée un cadre visuel pour l'élément. Le bord de bordure de l'élément est la limite de ce que vous pouvez voir.
La dernière zone, la zone de marge extérieure, 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. La modification de la outline-width de 200px de votre boîte n'a aucune incidence sur ce qui se trouve à l'intérieur du bord de 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, vous avez trois cadres photo montés côte à côte sur un mur. Les éléments de l'image encadrée correspondent au modèle de boîte comme suit :
- La zone de contenu est l'œuvre d'art.
- La zone de marge intérieure est le carton de montage blanc, entre le cadre et l'œuvre d'art.
- La zone de bordure est le cadre, qui fournit une bordure littérale à l'œuvre d'art.
- La zone de marge extérieure est l'espace entre les cadres.
- L'ombre occupe le même espace que la zone de marge extérieure.
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 le fonctionnement du modèle de boîte et son impact sur le site Web sur lequel vous travaillez.
Pour essayer cette fonctionnalité dans Chrome :
- Accédez aux outils de développement.
- Sélectionnez un élément.
- Affichez 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 user-agent aux documents HTML. La feuille de style définit l'apparence et le comportement des éléments, si aucun code CSS n'est défini pour eux. Le code CSS des feuilles de style user-agent varie selon le navigateur, mais chaque navigateur comporte des paramètres par défaut qui facilitent la lecture du contenu.
La feuille de style user-agent 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 display d'un élément <li> est list-item et celle display d'un élément <span>
est 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.
Un élément block remplit l'espace en ligne disponible par défaut, tandis que les éléments
inline et inline-block ne sont aussi grands que leur contenu.
La feuille de style user-agent 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, ces dimensions 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érifiez vos connaissances
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 avait box-sizing: border-box.
La largeur réelle de cette boîte est de 260 pixels.
Comme le code CSS utilise la valeur par défaut box-sizing: content-box, la largeur appliquée correspond à la largeur du contenu, à laquelle sont ajoutées la padding et la border des deux côtés. 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 ce comportement 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 la width à la zone de bordure au lieu de la zone de contenu. Cela signifie que notre border et notre padding sont
poussées vers l'intérieur. Ainsi, lorsque vous définissez la largeur de .my-box sur 200px, elle s'affiche en fait
sur 200px.
Découvrez comment cela fonctionne dans la démonstration interactive suivante. Lorsque vous activez ou désactivez la valeur box-sizing, la zone bleue indique le code 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 et chaque pseudo-élément ::before et ::after, puis 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 A (more) Modern CSS Reset.