Propriété CSS box-sizing
Exemple
Inclure le rembourrage et la bordure dans la largeur et la hauteur totales de l'élément :
#example1 {
box-sizing: border-box;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La box-sizing
propriété définit la façon dont la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure ou non le rembourrage et les bordures.
Valeur par défaut: | boîte de contenu |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.boxSizing="border-box" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Syntaxe CSS
box-sizing: content-box|border-box|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Spécifiez deux cases bordées côte à côte :
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Exemple
Définissez le "dimensionnement universel de la boîte":
* {
box-sizing: border-box;
}
Pages connexes
Tutoriel CSS : Dimensionnement des boîtes CSS
Référence HTML DOM : propriété boxSizing