Proprietà box sizing css

Secondo quanto specificato nel modulo relativo al box model nei css2 quando definiamo una larghezza questa dimensione verrà adottata dall'elemento senza tener conto di eventuali bordi o padding.

Guardando l'immagine troviamo un quadrato con una larghezza di 100px se ad esso attribuiamo un padding di 50px e un bordo di 4, questo elemento all'interno del nostro layout occuperà uno spazio di 100+50+50+4+4=208px.

Questa misura è data dalla larghezza dell'elemento più il padding e il bordo destro e sinistro. Utilizzando la proprietà box sizing possiamo cambiare le fondamenta costituenti il box model forzando il browser ad includere bordo e padding nel valore che noi abbiamo impostato per la larghezza.

<style type="text/css">div {
    width: 200px;
    padding: 20px;
    border: 2px solid blue;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
   }</style>

Utilizzando il codice riportato nello snippet in alto non avremmo più un ingombro di 244px ma un ingombro effettivo di 200px contenente un bordo di 2px e un padding di 20px.
Torniamo ora all'esempio esaminato nel precedente paragrafo (questo articolo fa infatti parte di una serie di cui trovate i link a fondo pagina), in cui avevamo dimensionato i tre blocchi contenuti nel secondo div con classe riga ad una larghezza pari al 33,33% dell'elemento contenitore.

Dato che volevo che questi tre blocchi si affiancassero l'uno all'altro e fossero leggermente separati tra di loro ho utilizzato il seguente codice 

<style type="text/css">.colonna{
    width: 33.33%;
    float: left;
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
}</style>

Utilizzando la proprietà box-sizing ho fatto in modo di includere un padding di 10px nella larghezza totale di 33,33% mentre con float left ho affiancato tra loro i blocchi con classe colonna.

Una precisazione: se date una occhiata al codice css relativo ai div riga, noterete la presenza della proprietà owerflow:hidden questa proprietà serve unicamente ad evitare il collasso dei margini di un elemento privo di float (div riga) contenente elementi flottanti (div colonna). Per ulteriori chiarimenti al riguardo vi rimando all'articolo relativo al collasso dei margini.

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *