box-sizing
Décide si width et height incluent la marge intérieure et la bordure.
- Valeur initiale
content-box- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments ayant une largeur ou une hauteur
- JavaScript
element.style.boxSizing = "border-box"
Exemple
#*,
*::before,
*::after {
box-sizing: border-box;
}<div class="stage">
<input placeholder="Un champ à 100% de largeur ne dépassera pas de son conteneur" style="width: 100%; padding: 10px 12px; border: 2px solid #525252; border-radius: 8px; box-sizing: border-box;">
</div>Définition et utilisation
#La propriété box-sizing change la façon de calculer la taille d’un élément. Avec content-box, la valeur par défaut, width et height ne concernent que le contenu, et la marge intérieure ainsi que la bordure agrandissent l’élément vers l’extérieur.
Avec border-box, la largeur indiquée correspond à la largeur totale de l’élément, marge intérieure et bordure comprises. Le contenu se réduit alors pour s’y adapter. C’est bien plus intuitif, c’est pourquoi de nombreux projets appliquent border-box à tous les éléments.
Une réinitialisation courante ressemble à ceci : *, *::before, *::after { box-sizing: border-box; }.
Syntaxe
#box-sizing: content-box | border-box;Valeurs
#- L’élément a 200px de contenu plus 2 × 16px de marge intérieure et 2 × 8px de bordure, soit 248px au total. La barre verte mesure 200px.
- L’élément entier mesure exactement 200px, comme la barre verte.
Valeurs en pratique
#content-box
.demo { box-sizing: content-box; }border-box
.demo { box-sizing: border-box; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ajoutez cette réinitialisation
border-boxau début de chaque feuille de style. Elle vous épargnera des calculs de pixels. - Dans certains navigateurs, les champs de formulaire ont par défaut un
box-sizingdifférent du reste des éléments ; la réinitialisation les uniformise tous.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.