Dimensionnement de boîte CSS3
CSS3 box-sizingLa propriété peut définir les propriétés width et height pour inclure le padding et la bordure.
Prise en charge des navigateurs
Les nombres dans le tableau indiquent le numéro de version du premier navigateur qui prend en charge la propriété.
Le -webkit- ou -moz- qui suit immédiatement les nombres est le préfixe du navigateur spécifié.
| Propriété | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Sans utiliser la propriété box-sizing de CSS3
Par défaut, la largeur et la hauteur d'un élément sont calculées comme suit :
width + padding + border = largeur réelle de l'élément
height (height) + padding (padding) + border (border) = hauteur réelle de l'élément
Cela signifie que lorsque nous définissons la largeur/hauteur d'un élément, la hauteur et la largeur réellement affichées seront plus grandes (car la bordure et le padding de l'élément sont également inclus dans le calcul de la largeur/hauteur).
Bien que les deux éléments <div> ci-dessus aient les mêmes paramètres de largeur et de hauteur, leurs tailles réellement affichées ne correspondent pas, car div2 a un padding spécifié :
Exemple
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Essayez-le vous-même »
Avec cette approche, si vous voulez obtenir la boîte plus petite et inclure le padding, vous devez prendre en compte la largeur de la bordure et du padding.
de CSS3box-sizingCette propriété résout bien ce problème.
Utilisation de la propriété box-sizing de CSS3
CSS3 box-sizingLa propriété inclut le padding et la bordure dans la largeur et la hauteur d'un élément.
Si défini sur l'élémentbox-sizing: border-box;Alors le padding et la bordure sont également inclus dans la largeur et la hauteur :
Voici deux éléments <div> avec l'ajout debox-sizing: border-box;Un exemple simple de la propriété.
Exemple
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;
}
Essayez-le vous-même »
D'après les résultats,box-sizing: border-box;L'effet est meilleur, et c'est exactement ce dont de nombreux développeurs ont besoin.
Le code suivant permet à tous les éléments d'afficher leurs tailles de manière plus intuitive. De nombreux navigateurs le prennent déjà en chargebox-sizing: border-box;(mais pas tous - c'est pourquoi les éléments input et text ont des largeurs différentes après avoir été définis sur width: 100%;).
Il est recommandé que tous les éléments utilisent box-sizing:
autres extensions