Box Sizing CSS

Box Sizing CSS

CSS box-sizing Cette propriété nous permet d'inclure la marge interne (remplissage) et la bordure dans la largeur et la hauteur totales de l'élément.

Si la propriété CSS box-sizing n'est pas spécifiée

Par défaut, la largeur et la hauteur de l'élément sont calculées ainsi :

  • width + padding + border = largeur réelle de l'élément
  • height + padding + border = hauteur réelle de l'élément

Cela signifie : lorsque vous définissez la largeur / hauteur d'un élément, l'élément apparaît généralement plus grand que ce que vous avez défini (parce que la bordure et la marge interne ont été ajoutées à la largeur / hauteur spécifiée de l'élément).

La figure suivante montre deux éléments <div> avec la même largeur et hauteur spécifiées :

Cette div est plus petite
（largeur de 300px, hauteur de 100px).
Cette div est plus grande
（largeur également de 300px, hauteur de 100px).

Les deux éléments <div> ci-dessus affichent des dimensions différentes dans le résultat final (car div2 a été configuré avec une marge interne) :

Exemple

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Essayer par vous-même

box-sizing Cette propriété résout ce problème.

Si l'on utilise la propriété CSS box-sizing

box-sizing Cette propriété nous permet d'inclure la marge interne et la bordure dans la largeur et la hauteur totales de l'élément.

Si l'élément a été configuré avec box-sizing: border-box;Si la largeur et la hauteur incluent la marge interne et la bordure :

Maintenant, les deux div ont la même taille !
Hooray!

L'exemple suivant est identique à l'exemple précédent, les deux éléments <div> ont tous deux été configurés box-sizing: border-box;：

Exemple

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Essayer par vous-même

En raison de l'utilisation box-sizing: border-box; de manière si efficace que de nombreux développeurs souhaitent que tous les éléments du site fonctionnent de cette manière.

Le code suivant garantit que tous les éléments peuvent être ajustés de cette manière plus intuitive. De nombreux navigateurs utilisent déjà cette méthode pour de nombreux éléments de formulaire box-sizing: border-box;(mais pas tous - c'est pourquoi input et textarea semblent différents lorsque width: 100%;).

L'application à tous les éléments est sécurisée et sage :

Exemple

* {
  box-sizing: border-box;
}

Essayer par vous-même

Propriété Box Sizing CSS

Attribut Description
box-sizing Définir la méthode de calcul de la largeur et de la hauteur des éléments : doivent-ils inclure la marge interne (padding) et la bordure ?