box-sizing |
Taille de la boite |
| CSS3 |
|
Syntaxe
|
box-sizing: border-box|content-box|initial|inherit;
|
Paramètres
| Paramètre |
Description |
| border-box |
Ce paramètre permet d'indiquer les propriétés de la largeur et la hauteur doivent inclure le contenu, l'espace et la bordure mais pas la marge. |
| content-box |
Ce paramètre permet d'indiquer les propriétés de la largeur et la hauteur inclus seulement le contenu. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer ce que doit inclure les dimensions de largeur et de hauteur.
Remarques
- Fonctionnalité principale : La propriété box-sizing définit la manière dont les dimensions d'un élément (telles que width et
height) sont calculées. Elle permet de spécifier si les dimensions incluent ou non les bordures (border) et les
espacements internes (padding). Cela facilite le contrôle du comportement des éléments lors de l'application de dimensions.
- Comportement par défaut : Par défaut, la propriété box-sizing est définie sur content-box, ce qui signifie que les dimensions d'un élément ne
tiennent pas compte des bordures et du padding. Par conséquent, l'ajout de ces propriétés peut entraîner une augmentation des dimensions réelles de l'élément.
- Facilite le layout avec border-box : L'utilisation de box-sizing: border-box; simplifie la mise en page, car les bordures et le
padding sont inclus dans la largeur et la hauteur définies. Cela évite les erreurs fréquentes liées au dépassement du parent, notamment lors de l'ajout de
padding ou de bordures à des éléments ayant des tailles fixes.
- Impact sur les mises en page fluides : Lorsque vous utilisez des mises en page fluides, box-sizing: border-box; est souvent préféré, car il assure que
l'élément n'explosera pas hors de son conteneur. Cela permet de gérer les dimensions sans se soucier des bordures et du padding ajoutés au contenu.
- Utilisation avec les width et height : Lors de l'utilisation de box-sizing: content-box;, les valeurs de width et
height ne tiennent pas compte du padding et des bordures, ce qui peut entraîner un calcul plus complexe pour
définir des tailles précises. À l'inverse, avec border-box, le calcul devient plus intuitif et les dimensions sont plus faciles à gérer.
- Application universelle avec le sélecteur * : Il est courant d'appliquer box-sizing: border-box; globalement à tous les éléments en utilisant le sélecteur
universel (*). Cela garantit une gestion plus cohérente des dimensions dans l'ensemble du site et évite des surprises inattendues lorsque de nouveaux éléments sont ajoutés.
- Compatibilité des navigateurs : La propriété box-sizing est largement supportée dans tous les navigateurs modernes. Cependant, dans les anciennes versions
d'Internet Explorer (avant IE8), la prise en charge était limitée. Pour
garantir une compatibilité maximale, il est conseillé de toujours utiliser des préfixes ou d'adopter un modèle de boîte global sur tous les éléments via *.
Dernière mise à jour : Dimanche, le 20 décembre 2015
