back to top

CSS box-sizing

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.

Pubblicitร