box-sizing CSS propriété

Définition de la CSS box-sizing.

La propriété CSS box-sizing permet de spécifier si la valeur de width ou de height inclut la marge intérieure et la taille de la bordure.

Exemple de syntaxe CSS box-sizing :

box-sizing : border-box;
box-sizing : padding-box;
box-sizing : content-box;

La propriété de feuille de style box-sizing CSS peut pendre comme valeur :

content-box : la longueur width et la hauteur height n'incluent pas les padding, les margin et les border. Valeur par défaut.
border-box : la longueur width et la hauteur height incluent les padding et les border mais pas les margin.
padding-box : la longueur width et la hauteur height incluent le padding mais pas les margin ni les border.
inherit : hérite de la propriété CSS box-sizing de son parent.

Exemple de code box-sizing CSS

Conditions d'application de la CSS box-sizing.

La propriété de feuille de style box-sizing CSS est applicable sur l'ensemble des balises HTML ou XHTML.

Problème d'interprétation de box-sizing en Css.

La propriété de feuille de style box-sizing CSS pose problème car n'est reconnue que par Chrome 9+,Internet Explorer 8+, Opera 7+, Safari 5.1+ et Firefox 29+. et la valeur padding-box n'est reconnue pas encore reconnue.

Compatibilités navigateurs de la propriété box-sizing

Détails des versions de la CSS box-sizing: Propriété box-sizing est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS box-sizing: Propriété CSS box-sizing plus ou moins compatible à partir de Chrome 10; Propriété CSS box-sizing est compatible à partir de Firefox 29; Propriété CSS box-sizing plus ou moins compatible à partir de Internet Explorer 8; Propriété CSS box-sizing plus ou moins compatible à partir de Opera 7; Propriété CSS box-sizing plus ou moins compatible à partir de Safari 5.1

Propriétés CSS préfixées de box-sizing

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété box-sizing CSS :

Pour faire fonctionner la propriété de feuille de style css box-sizing sur Firefox, Safari et Internet Explorer < 9 :

Exemple de Css box-sizing :

.boxsizing{
  -moz-box-sizing    : border-box; /* Firefox */
  -webkit-box-sizing : border-box; /* Safari */
  box-sizing         : border-box;
  *behavior          : url(/js/boxsizing.htc); /* ie7 et ie8 */
}

Le fichier boxsizing.htc est disponible box-sizing-polyfill

Détecter la propriété CSS box-sizing en Javascript

Equivalence de la CSS box-sizing en HTML.

La propriété CSS box-sizing n'a pas d'équivalence en HTML ou XHTML.

Votre avis sur la définition box-sizing en CSS

Votez pour la définition CSS `box-sizing`

Votes: 4.3 / 5 - 18 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css box-sizing

Définitions CSS annexes box-sizing

border: La propriété de bordure CSS BORDER est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bord...[ border ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
margin: La propriété de Marge CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordur...[ margin ]
padding: La propriété de Marge CSS PADDING permet de spécifier individuellement ou globalement l'espace qui sépare le contenu d'un élément de sa bordure de cha...[ padding ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]