Proprietà box-sizing. Una semplice soluzione per la gestione del modello box in CSS

Modello box nei CSS per un principiante può far venire un grande mal di testa. Semplicemente perché dovrebbe sempre tenere in considerazione creando un elemento box per esempio attraverso il tag <div> e indicando altezza e larghezza, che il suo box no sara mai cosi come lui l'avrebbe pensato perche sara sempre piu grande di altezza e larghezza indicata. Era cosi fino al era di  CSS3 e la sua nuova proprietà box-sizing .

Vediamo subito un esempio

.pr1{
width:200px;
height:200px;
paddding:12px;
border: 3px solid;
background-color:#E52222
}
<div class=”pr1”><div>

Confronto fra modelo classico di box e con box-sizing.

In questo esempio anche se ho indicato l'altezza e larghezza del blocco div lo spazio che occuperà sulla pagina sara diverso perché devo aggiungere ai valori indicati padding moltiplicato per due(perche si aggiunge sui due lati) e larghezza del border moltiplicato sempre per due alla fine il mio box con la classe .pr1 avrà come altezza 230 px e come larghezza anche 230 px perché l'altezza e larghezza di 200px che abbiamo indicato si riferisce solo al CONTENUTO!

Vediamo subito di paragonare il nostro box del modello classico con altezza e larghezza di 200px con lo stesso box con la nuova proprietà box-sizing. Per vedere subito la differenza:

box del modello classico con width:200px; height:200px;
box con proprietà box-sizing:border-box; con width:200px; height:200px;

Si vede subito la differenza.

La proprieta box-sizing  di CSS3

Ma col arrivo del CSS3 abbiamo la concreta possibilità di gestire fin dal inizio l'altezza e larghezza effetiva  del nostro blocco. Per questo é stata inventata la proprietà box-sizing. Con il suo valore piu usato border-box; (perché altro valore ripete il concetto del modello classico del box, content-box   si prende in considerazione altezza e larghezza del contenuto e puoi si aggiungono i valori di  pagging e border )

Il valore border-box dice al browser che contenuto, padding e border devono stare al interno del valori indicati per width height. Cio è il bordo e il padding saranno creati e visualizzati al interno del box e non al esterno come nel modello classico.

Proprieta box-sizing:border-box;

Vediamo un esempio pratico del uso di box-sizing .

Vediamo di creare tre box attraverso tag <div> inseriti in un altro box creato sempre con  tag div

<div class="container">
<div id="el1">Element 1</div>
<div id="el2">Element 2</div>
<div id="el3">Element 3</div>
</div>

E ora vediamo di applicare tre stili diversi per quanto riguarda il bordo e il padding usando anche sempre per tutti i tre esempi la stessa proprieta box-sizing:border-box;

.container{
text-align:center;
}
.container div{
/* gestire grandezza box attraverso proprietà box-sizing */
box-sizing:border-box;
width:120px;
height:120px;
display:inline-block;
vertical-align:top;
}
/*Grazie alla proprieta box-sizing posiamo impostare qualsiasi valore del padding e border, nonostante cio i nostri box saranno sempre uguali come grandezza finale */
#el1{
color:#524480;
background-color:#B2A4E0;
}
#el2{
padding:8px;
border:10px solid #9ec551;/* aggiungeremo bordo con 10px di spessore su tutti i lati  */
background-color:#fff;
}
#el3{
padding:32px;/* e per questo box inseriremo del padding */
background-color:#ccc;
}

Il risultato

Senza bordo e padding
Con bordo di 10px
Con padding di 32px

Come potrai notare i nostri box sono rimasti uguali come altezza e larghezza nonostante il bordo e il padding che abbiamo aggiunto ad esso.

 

Letto 392 volte