Follie HTML & CSS 2: Il Box Model

Questa serie include dei rapidi e semplici consigli su dei problemi che prima o poi capitano a tutti i web designer.

Perchè se io imposto nei CSS la width di un div a 200px quando poi vado a controllare è di 220px? Magari semplicemente perchè è stato impostato un padding di 10px!
Proprio così, di default i css sommano bordi e padding alla dimensione dichiarata, il che non è un grossissimo problema se lavoriamo con misure fisse, dalle quali è possibile sottrarre la dimensione del border e del padding ma se utilizzassimo ad esempio una percentuale come larghezza o altezza?

*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

Questa è la soluzione, impostando il valore border-box per il parametro box-sizing indichiamo al browser che la dimensione che noi dichiariamo per un elemento dev’essere riferita all’elemento nella sua interezza, i border e il padding verranno dunque sottratti alla dimensione da noi specificata automaticamente.

Matteo Currò

Autore: Mi chiamo , ho 30 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.