Proprietà CSS box-sizing

Definizione e uso

L'attributo box-sizing consente di definire in modo specifico come devono essere definiti gli elementi che corrispondono a una determinata area.

Ad esempio, se si desidera posizionare due riquadri accanto, è possibile impostare box-sizing su "border-box". Questo farà sì che il browser mostri i riquadri con larghezza e altezza specificate, includendo i bordi e i margini all'interno del riquadro.

Vedi anche:

Corso CSS3:Interfaccia utente CSS3

Manuale di riferimento HTML DOM:Attributo boxSizing

Esempio

Definisce due riquadri paralleli con bordi:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Prova da solo

C'è più esempio nella parte inferiore della pagina.

Sintassi CSS

box-sizing: content-box|border-box|inherit;

Valore dell'attributo

Valore Descrizione
content-box

Questo è il comportamento della larghezza e altezza definito da CSS2.1.

La larghezza e l'altezza vengono applicate al riquadro del contenuto dell'elemento.

I margini interni e i bordi dell'elemento vengono disegnati al di fuori della larghezza e altezza.
border-box

La larghezza e l'altezza dell'elemento determinano il riquadro dell'elemento.

Questo significa che qualsiasi margine interno e bordo specificato per l'elemento verrà disegnato all'interno dei larghezza e altezza impostati.

Il larghezza e l'altezza del contenuto possono essere calcolati sottraendo i margini e i bordi dai larghezza e altezza impostati.
inherit Definisce che l'attributo box-sizing deve essere ereditato dal valore dell'elemento padre.

Dettagli tecnici

Valore predefinito: content-box
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: oggetto.style.boxSizing="border-box"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

I numeri con -webkit- o -moz- come prefisso rappresentano la versione iniziale utilizzata.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5