Un’altra novità importante di CSS3 è data dalla proprietà box-sizing. Grazie a questa proprietà è possibile definire il modo in cui CSS debba calcolare la dimensione di un box (larghezza e altezza) in relazione ad eventuali padding e bordi.
Dimensionamento di un box in CSS 2.1
Prima dell’avvento di CSS3, il dimensionamento di un box coi CSS riguardava esclusivamente l’area di contenuto. In altre parole: se veniva definita in modo esplicito l’altezza o la larghezza di un elemento, questo valore non includeva eventuali margini, padding e bordi le cui dimensioni andavano a sommarsi a quelle dell’area di contenuto.
Facciamo un esempio: supponiamo di avere un box con il seguente stile:
div {
width: 200px;
padding: 20px;
border: 5px;
}La larghezza effettiva del nostro box sarebbe stata di 250 pixel, in base alla formula:
200 + (20 * 2) + (5 * 2) = 250
Per gestire l’ingombro effettivo, quindi, era necessario fare alcuni calcoli…
Gestire le dimensioni di un box con la proprietà box-sizing
Grazie a questa nuova proprietà di CSS3 gli sviluppatori hanno a disposizione nuove possibilità cioè, se lo desiderano, di settare le dimensioni del box ricomprendendo in esse anche padding e bordi.
La proprietà box-sizing consente appunto di fare ciò. Vediamo un nuovo esempio riprendendo quello precedente:
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px;
}Questa regola di stile imposta il nostro box ad una dimensione effettiva di 200 pixel comprensivo di padding e bordo. In pratica per ottenere la dimensione effettiva dell’area di contenuto dovremo fare il conto inverso rispetto a prima:
200 - (20 * 2) - (5 * 2) = 150
I valori ammessi per la proprietà box-sizing sono:
- content-box – (default) la dimensione del box riguarda esclusivamente l’area dei contenuti. Padding e bordi verranno a sommarsi alle dimensioni settate con width e/o height.
- border-box – le dimensioni del box settate con width e/o height comprendono eventuale padding e bordo.
Per testare l’effetto si veda questo esempio.
