Dimensionnement des boîtes CSS
Dimensionnement des boîtes CSS
Le CSS box-sizing La propriété nous 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
hauteur + rembourrage + bordure = 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 ce que vous 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
Cette div est plus petite (la largeur est de 300px et la hauteur est de 100px).
Cette div est plus grande (la largeur est également de 300px et la hauteur est de 100px).
Les deux éléments
Exemple
.div1 {
largeur : 300 pixels ;
hauteur : 100px ;
bordure : 1 pixel bleu uni ;
}
.div2 {
largeur : 300 pixels ;
hauteur : 100px ;
rembourrage : 50px ;
bordure : 1 pixel rouge uni ;
}
Essayez-le vous-même »
Le box-sizing propriété résout ce problème.
Avec la propriété CSS box-sizing
Le box-sizing La proprié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; sur un élément, padding et border sont inclus dans la largeur et la hauteur :
Les deux divs ont la même taille maintenant !
Hourra !
Voici le même exemple que ci-dessus, avec box-sizing: border-box;
ajouté aux deux éléments
Exemple
.div1 {
largeur : 300 pixels ;
hauteur : 100px ;
bordure : 1 pixel bleu uni ;
dimensionnement de la boîte : border-box ;
}
.div2 {
largeur : 300 pixels ;
hauteur : 100px ;
rembourrage : 50px ;
bordure : 1 pixel rouge uni ;
dimensionnement de la boîte : border-box ;
}
Essayez-le vous-même »
Étant donné que le résultat de l’utilisation de la box-sizing: border-box; est tellement mieux, de nombreux développeurs veulent 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; pour 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 :
Propriété de dimensionnement de la boîte CSS
| Propriété | Description |
|---|---|
| dimensionnement de la boîte | Définit comment la largeur et la hauteur d’un élément sont calculées : doivent-elles inclure ou non le rembourrage et les bordures ? |
#Dimensionnement #des #boîtes #CSS