Box Sizing CSS

Box Sizing CSS

CSS box-sizing L'attributo ci permette di includere il margine interno (riempimento) e il bordo nel totale della larghezza e altezza dell'elemento.

Supponiamo di non specificare l'attributo CSS box-sizing

Di default, la larghezza e l'altezza dell'elemento sono calcolate in questo modo:

  • larghezza + padding + border = larghezza effettiva dell'elemento
  • altezza + padding + border = altezza effettiva dell'elemento

Questo significa: quando si imposta la larghezza/altezza di un elemento, l'elemento di solito sembra più grande di quanto impostato (poiché il margine e il bordo dell'elemento sono stati aggiunti alla larghezza/altezza specificata dell'elemento).

La figura sottostante mostra due elementi <div> con la stessa larghezza e altezza specificate:

Questa div è più piccola
(larghezza di 300px, altezza di 100px).
Questa div è più grande
(la larghezza è anche di 300px, l'altezza di 100px).

I due elementi <div> superiori mostrano dimensioni diverse nel risultato finale (poiché div2 ha specificato il margine interno):

Esempio

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Prova da solo

box-sizing L'attributo risolve questo problema.

Se si utilizza l'attributo CSS box-sizing

box-sizing L'attributo ci permette di includere il margine interno e il bordo nel totale della larghezza e altezza dell'elemento.

Se è impostato su un elemento box-sizing: border-box;Quindi la larghezza e l'altezza includono anche il margine interno e il bordo:

Ora le due dimensioni delle div sono le stesse!
Hooray!

Questo esempio è lo stesso dell'esempio precedente, entrambi gli elementi <div> hanno impostato box-sizing: border-box;:

Esempio

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Prova da solo

Perché l'uso box-sizing: border-box; in modo così efficace che molti sviluppatori desiderano che tutti gli elementi del sito funzionino in questo modo.

Il codice seguente garantisce che tutti gli elementi vengano regolati in modo più intuitivo. Molti browser stanno già utilizzando box-sizing: border-box;(ma non tutti - ecco perché input e textarea sembrano diversi quando width: 100%;).

Applicarlo a tutti gli elementi è sicuro e saggio:

Esempio

* {
  box-sizing: border-box;
}

Prova da solo

Proprietà Box Sizing CSS

Proprietà Descrizione
box-sizing Definire il modo in cui si calcolano le larghezze e le altezze degli elementi: se devono includere i margini interni (padding) e i bordi.