En tant que développeur frontend, comprendre le modèle de boîte CSS est une étape décisive pour pouvoir fournir des mises en page parfaites au pixel près. Allons droit au but et discutons de la façon dont les éléments en ligne et en bloc se comportent différemment dans le contexte des deux types de modèles de boîte : content-box et border-box.

Les bases : qu’y a-t-il dans la boîte ?

Avant d'entrer dans les détails, cela vaut la peine de récapituler ce qu'est le modèle de boîte. Chaque élément de votre page est une boîte (oui, même ceux qui ne semblent pas réellement de forme carrée). Les boîtes peuvent se trouver à l'intérieur, contenir et/ou à côté d'autres boîtes.

Le modèle de boîte s'applique à tous et se compose de :

• Boîte de contenu : Un élément HTML ou un pseudo-élément CSS dans lequel se trouve votre contenu réel : texte, images, etc.
• Padding : L'espace entre votre contenu et la bordure.
• Bordure : La ligne qui entoure le remplissage et le contenu.
• Marge : L'espace à l'extérieur de la bordure qui repousse les autres éléments.

Ainsi, presque tous les éléments HTML contenus dans et y compris le

, ainsi que chaque pseudo-élément CSS, sont une boîte. Les "murs" de cette boîte sont votre bordure et peuvent recevoir une épaisseur (ou une largeur. Entre ce contenu et les parois de cette boîte, vous avez un rembourrage. Entre ces murs et les autres boîtes, vous avez une marge.

Différences clés entre les éléments en ligne et en bloc

Il est crucial de comprendre les principales différences dans l'impact du modèle de boîte sur les éléments en ligne et en bloc :

1. Largeur : Les éléments de bloc s'agrandissent pour remplir leur conteneur par défaut. Des éléments en ligne ? Ils occupent juste assez d'espace pour leur contenu.

2. Hauteur : Pour les éléments de bloc, le remplissage, la bordure et la marge augmenteront tous la hauteur. Les éléments en ligne restent dans la hauteur de la ligne, quel que soit le remplissage vertical ou les bordures.

3. Impact sur la mise en page : Les éléments de bloc influencent la mise en page horizontale et verticale. Les éléments en ligne concernent uniquement le flux horizontal, avec un impact minimal sur l'espacement vertical.

4. Réduction des marges : La réduction des marges est un comportement spécifique aux éléments de bloc, où les marges verticales adjacentes peuvent fusionner (ainsi, une marge inférieure : 20 px sur un élément peut s'effondrer en une marge supérieure : 20px sur un élément suivant, créant une marge de 20px). Les éléments en ligne ne jouent pas à ce jeu.

Maintenant que nous connaissons les composants du modèle de boîte et la différence entre les éléments en ligne et en bloc, voyons comment les boîtes de contenu sont affectées par la propriété box-sizing selon qu'il s'agit d'un élément en ligne ou en bloc.

Dimensionnement de la boîte : boîte de contenu ou boîte de bordure

La propriété box-sizing contrôle la manière dont la largeur et la hauteur d'un élément sont calculées et peut avoir un impact significatif sur la mise en page.

1. boîte de contenu avec des éléments en ligne

Lors du dimensionnement de la boîte : content-box est appliqué à un élément en ligne :

• Largeur et hauteur : La largeur est déterminée uniquement par le contenu. Le remplissage, la bordure et la marge sont ajoutés au-dessus de cette largeur.
• Impact sur la mise en page : Étant donné que les éléments en ligne n'interrompent pas le flux du texte, la largeur de l'élément est aussi large que le contenu. Le remplissage vertical et les bordures sont visuellement présents mais n'affectent pas la hauteur de la ligne environnante.

2. boîte de contenu avec des éléments de bloc

Lors du dimensionnement de la boîte : content-box est appliqué à un élément de bloc :

• Largeur et hauteur : La largeur ou la hauteur spécifiée s'applique uniquement à la zone de contenu. Le remplissage et la bordure sont ajoutés en dehors de cela, augmentant la taille globale de l'élément.
• Impact sur la mise en page : Les éléments de bloc s'étendent par défaut sur toute la largeur de leur conteneur, sauf indication contraire. Le remplissage et les bordures augmentent la taille de l'élément, éloignant ainsi les éléments adjacents.

3. border-box avec des éléments en ligne

Lors du dimensionnement de la boîte : border-box est appliqué à un élément en ligne :

• Largeur et hauteur : La largeur inclut le contenu, le remplissage et la bordure. La zone de contenu se rétrécit pour s'adapter au remplissage et aux bordures dans la largeur spécifiée.
• Impact sur la mise en page : La largeur de l'élément est toujours déterminée par le contenu, mais le remplissage et les bordures sont désormais inclus dans cette largeur. Le remplissage vertical et les bordures restent visuellement présents mais ne modifient pas la hauteur de la ligne.

4. border-box avec des éléments de bloc

Lors du dimensionnement de la boîte : border-box est appliqué à un élément de bloc :

• Largeur et hauteur : La largeur et la hauteur spécifiées incluent le contenu, le remplissage et la bordure. Cela signifie que la taille totale de l'élément reste cohérente avec les dimensions spécifiées, quelle que soit la quantité de remplissage ou de bordure que vous ajoutez.
• Impact sur la mise en page : La taille de l'élément de bloc est plus prévisible car le remplissage et la bordure sont contenus dans la largeur spécifiée. Cela facilite la gestion de la conception de la mise en page, en particulier lors de l'alignement des éléments côte à côte.

Il convient de souligner que même si la content-box est la valeur par défaut, la border-box est largement considérée comme plus intuitive et offre le plus grand degré de contrôle.

---

Le modèle de boîte CSS n'est pas seulement un concept puissant : c'est un outil fondamental dans votre arsenal de développement frontend. En comprenant comment la taille des boîtes affecte différemment les éléments en ligne et les éléments en bloc, vous pouvez commencer à créer des mises en page impeccables, à la fois nettes et fonctionnelles, sans avoir à résoudre les problèmes liés aux mises en page qui se comportent mal.

Si vous avez apprécié ce téléchargement sur le modèle de boîte, passez la souris sur cette boîte en forme de cœur en haut à gauche et montrez à ce message tout votre amour !