CSS Dimensionnement de la boîte
Dimensionnement de la boîte CSS
La propriété CSS box-sizing définit comment calculer la largeur et la hauteur d'un élément : le calcul doit-il inclure le rembourrage et les bordures ou non ?
Par défaut, la largeur et la hauteur d'un élément sont calculées comme suit :
- largeur + rembourrage + bordure = largeur réelle d'un élément
- hauteur + rembourrage + bordure = hauteur réelle d'un élément
Cela signifie que lorsque vous définissez la largeur ou la hauteur d'un élément, celui-ci apparaît souvent plus grand que ce que vous avez spécifié (car la bordure et le rembourrage de l'élément sont ajoutés à la largeur ou à la hauteur spécifiée).
Ce qui suit illustre deux éléments <div> avec la même largeur et hauteur spécifiées. Les deux éléments <div> finissent par avoir des tailles différentes (car div2 a un rembourrage important) :
Exemple
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} La propriété box-sizing résout ce problème.
La solution de dimensionnement de boîte CSS
La propriété box-sizing 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; sur un élément, le rembourrage et la bordure sont inclus dans le calcul de la largeur et de 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;
} Puisque le résultat de l'utilisation de box-sizing: border-box; est bien meilleur, de nombreux développeurs souhaitent que tous les éléments de leurs pages fonctionnent de cette manière.
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; pour de nombreux éléments de formulaire (mais pas tous - c'est pourquoi les entrées et les zones de texte ont un aspect différent à width: 100%;).
Appliquer cela à tous les éléments est sûr et judicieux :
Exemple
* {
box-sizing: border-box;
} Propriété de dimensionnement de boîte CSS
| Propriété | Description |
|---|---|
| box-sizing | Définit comment la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure le rembourrage et les bordures ou non ? |