Proprietà CSS box-sizing
La proprietà box-sizing definisce il calcolo di larghezza e altezza di un elemento. Guarda esempi e provali tu stesso.
La proprietà box-sizing controlla come vengono calcolati width e height di un elemento — in particolare, se il padding e il border sono conteggiati all'interno di quelle dimensioni oppure aggiunti sopra di esse. È una delle proprietà CSS3.
Questa pagina spiega la differenza tra i due modelli di box (content-box e border-box), perché border-box è il valore moderno predefinito per la maggior parte dei layout, e come applicarlo all'intera pagina.
Come il modello di box influisce sulle dimensioni
Per impostazione predefinita (content-box), width e height impostano solo la dimensione dell'area del contenuto. Il padding e il border vengono quindi aggiunti sopra, quindi il box renderizzato è più grande del valore scritto:
- larghezza + padding + border = larghezza renderizzata dell'elemento
- altezza + padding + border = altezza renderizzata dell'elemento
Ad esempio, un box con width: 400px, padding: 50px su ciascun lato e un border di 5px su ciascun lato occupa effettivamente 400 + 100 + 10 = 510px di spazio orizzontale. Questa è una frequente fonte di bug nei layout: due colonne larghe 50% con qualsiasi padding o border non staranno affiancate, perché ciascuna risulterà più larga della metà del contenitore.
Con box-sizing: border-box, il padding e il border vengono racchiusi all'interno della larghezza e altezza dichiarate. Un elemento con width: 50% rimane esattamente la metà della larghezza del contenitore indipendentemente da quanti padding o border vengono aggiunti — ecco perché la maggior parte dei fogli di stile reimposta ogni elemento a border-box.
| Valore iniziale | content-box |
|---|---|
| Si applica a | Tutti gli elementi che accettano larghezza e altezza. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.boxSizing = "border-box"; |
Sintassi
Sintassi della proprietà CSS box-sizing
box-sizing: content-box | border-box | initial | inherit;L'esempio seguente mostra due elementi <div> con dichiarazioni identiche di width, height, padding e border — differiscono solo nel valore di box-sizing, il che è sufficiente a farli renderizzare con dimensioni diverse:
Esempio della proprietà box-sizing
Esempio della proprietà CSS box-sizing con i valori content-box e border-box
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<hr />
<h3>box-sizing: content-box (default):</h3>
<div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
<br />
<h3>box-sizing: border-box:</h3>
<div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
</body>
</html>Risultato
Con content-box, il box renderizzato è più largo della width dichiarata perché padding e border vi vengono aggiunti. Con border-box, il padding e il border vengono assorbiti all'interno della width e dell'height dichiarate, quindi il box rimane esattamente delle dimensioni specificate.
border-box è il valore a cui si ricorre più spesso quando si costruiscono i layout. Rende le dimensioni degli elementi prevedibili ed elimina un'intera classe di problemi — si può aggiungere padding o un border senza dover ricalcolare le larghezze.
Esempio di due box con bordo affiancati
Qui border-box permette a due box in float larghi 50% di stare fianco a fianco anche se ciascuno ha il proprio border e padding. Con il valore predefinito content-box, i border e i padding spingerebbero la larghezza combinata oltre il 100% e costringerebbero il secondo box su una nuova riga.
Esempio della proprietà CSS box-sizing con il valore border-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px double #1c87c9;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 3px solid #ccc;
float: left;
padding: 3px;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<p>Here you can see two bordered boxes defined side by side.</p>
<div class="container">
<div class="box">Left part</div>
<div class="box">Right part</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Applicare border-box all'intera pagina
Invece di impostare box-sizing sui singoli elementi, la maggior parte dei progetti lo applica una volta sola a ogni elemento tramite il selettore universale. Questo è il reset CSS più comune nei fogli di stile moderni:
*,
*::before,
*::after {
box-sizing: border-box;
}I selettori *::before e *::after assicurano che i box di contenuto generato seguano la stessa regola. Dopo questo reset, width e height significano "la dimensione totale inclusi padding e border" ovunque, che è ciò che la maggior parte delle persone si aspetta intuitivamente.
Supporto nei browser
box-sizing è supportato in tutti i browser moderni, incluse le versioni attuali di Chrome, Firefox, Safari ed Edge. È una funzionalità CSS3 stabile e non necessita di prefissi vendor per i browser odierni.
Valori
| Valore | Descrizione |
|---|---|
| content-box | Le proprietà width e height includono il contenuto, ma non il padding, il border o il margin. È il valore predefinito. |
| border-box | Le proprietà width e height includono il contenuto, il padding e il border, ma non includono il margin. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |