Dimensionnement des boîtes CSS
Dimensionnement des boîtes CSS
La propriété CSS box-sizingnous permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totales d'un élément.
Sans la propriété CSS box-sizing
Par défaut, la largeur et la hauteur d'un élément sont calculées comme suit :
width + padding + border = largeur réelle d'un élément
height + padding + border = hauteur réelle d'un élément
Cela signifie : Lorsque vous définissez la largeur/hauteur d'un élément, l'élément apparaît souvent plus grand que vous ne l'avez défini (parce que la bordure et le rembourrage de l'élément sont ajoutés à la largeur/hauteur spécifiée de l'élément).
L'illustration suivante montre deux éléments <div> avec les mêmes largeur et hauteur spécifiées :
Les deux éléments <div> ci-dessus se retrouvent avec des tailles différentes dans le résultat (car div2 a un rembourrage spécifié) :
Exemple
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
La box-sizingpropriété résout ce problème.
Avec la propriété CSS box-sizing
La box-sizingpropriété nous permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totales d'un élément.
Si vous définissez box-sizing: border-box;un élément, le rembourrage et la bordure sont inclus dans la largeur et la hauteur :
Voici le même exemple que ci-dessus, avec box-sizing: border-box;
ajouté aux deux éléments <div> :
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;
}
Étant donné que le résultat de l'utilisation de box-sizing: border-box;est tellement meilleur, de nombreux développeurs souhaitent que tous les éléments de leurs pages fonctionnent de cette façon.
Le code ci-dessous garantit que tous les éléments sont dimensionnés de cette manière plus intuitive. De nombreux navigateurs utilisent déjà box-sizing: border-box;de nombreux éléments de formulaire (mais pas tous - c'est pourquoi les entrées et les zones de texte ont une largeur différente : 100 % ;).
Appliquer ceci à tous les éléments est sûr et sage :
Exemple
* {
box-sizing: border-box;
}
Propriété de dimensionnement de la boîte CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |