Fermer

mai 16, 2023

Déballage de la propriété Box-Sizing en CSS / Blogs / Perficient

Déballage de la propriété Box-Sizing en CSS / Blogs / Perficient


Propriété de dimensionnement de boîte en CSS

Box-sizing est une propriété CSS qui nous aide à définir la hauteur et la largeur d’un élément. Parfois, lorsque nous définissons la hauteur et la largeur d’un élément, cela ne fonctionne pas comme prévu. Dans de telles situations, nous pouvons utiliser la propriété box-sizing pour ajuster la taille de l’élément.

Modèle de boîte :

Le Box-model est un terme utilisé en CSS pour décrire la disposition d’un élément.
Le modèle de boîte CSS est la boîte qui entoure chaque élément de CSS. Il se compose du contenu, du rembourrage et de la bordure.
Par défaut, la hauteur et la largeur totales rendues sont calculées comme suit :

  • rembourrage + bordure + largeur = largeur réelle du rendu
  • rembourrage + bordure + hauteur = hauteur réelle du rendu

Comprenons l’exemple ci-dessous qui illustre le modèle de boîte.

Boîte

Sans la propriété box-sizing, la largeur de l’élément est la zone de contenu.
Dans l’exemple ci-dessus, nous définissons la largeur sur 158px. Il y sera défini mais si nous ajoutons un rembourrage de 20px et une bordure de 1px des deux côtés, alors après le rendu, la largeur réelle est de 200px.

Boîte-dimensionnement : Border-box :

En utilisant cette propriété, nous pouvons empêcher la bordure et le rembourrage d’augmenter la largeur et la hauteur de l’élément. Par exemple, si nous définissons la largeur de l’élément sur 200px et y ajoutons une bordure et un rembourrage, la largeur totale réelle du composant sera toujours de 200px.

Voyons voir comment ça fonctionne:

Code

SORTIR:

Sortir

Conseil:

Vous n’êtes pas obligé de définir cette propriété pour chaque élément. Utilisez plutôt le sélecteur universelpour définir cette propriété pour tous les composants ou éléments

.

Comment faire:

Conseil

Conclusion:

La propriété CSS box-sizing détermine la façon dont la taille d’un élément HTML est calculée, permettant au remplissage et aux bordures d’être inclus ou exclus du dimensionnement de l’élément. En utilisant les propriétés de dimensionnement des boîtes, vous pouvez créer des mises en page de site Web plus prévisibles et cohérentes.




Source link