Proprietà box-size CSS
Esempio
Includi riempimento e bordo nella larghezza e altezza totali dell'elemento:
#example1 {
box-sizing: border-box;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La box-sizing
proprietà definisce come vengono calcolate la larghezza e l'altezza di un elemento: devono includere spaziatura interna e bordi oppure no.
Valore di default: | casella di contenuto |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.boxSizing="border-box" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Sintassi CSS
box-sizing: content-box|border-box|initial|inherit;
Valori di proprietà
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 |
Altri esempi
Esempio
Specificare due caselle bordate affiancate:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Esempio
Impostare il "ridimensionamento scatola universale":
* {
box-sizing: border-box;
}
Pagine correlate
Tutorial CSS: dimensionamento della scatola CSS
Riferimento HTML DOM: proprietà boxSizing