Proprietà boxSizing dello stile

Definizione e uso

boxSizing La proprietà ti permette di definire in modo specifico come definire l'elemento specifico che corrisponde a una certa area.

Ad esempio, se hai bisogno di posizionare due caselle con bordi accanto l'una all'altra, puoi impostare box-sizing su "border-box". Questo permetterà al browser di visualizzare le caselle con larghezza e altezza specificate, includendo i bordi e i margini interni nella scatola.

Vedi anche:

Manuale CSS:box-sizing proprietà

Esempio

Modifica la proprietà boxSizing:

document.getElementById("myDIV").style.boxSizing = "border-box";

Prova a te stesso

Sintassi

Restituisce la proprietà boxSizing:

oggetto.style.boxSizing

Imposta la proprietà boxSizing:

oggetto.style.boxSizing = "content-box|border-box|initial|inherit"

Valore dell'attributo

Valore Descrizione
content-box

Valore predefinito. Questo è il comportamento della larghezza e altezza definito dallo standard CSS2.1.

La larghezza e l'altezza definite (nonché le proprietà min/max) vengono applicate alla larghezza e altezza della scatola di contenuto dell'elemento.

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

La larghezza e l'altezza dell'elemento determinano la scatola di bordo dell'elemento.

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

Il valore di ritorno può essere calcolato sottraendo i margini e i bordi dal larghezza e altezza definiti.
initial Imposta questa proprietà al suo valore predefinito. Vedi anche initial。
inherit Ecco come si eredita questa proprietà dal suo elemento padre. Vedi anche inherit。

Dettagli tecnici

Valore predefinito: content-box
Valore di ritorno: stringa che rappresenta l'elemento box-sizing proprietà。
Versione CSS: CSS3

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto