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.

Follie HTML & CSS 1: Dichiarazione del Doctype

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

È necessario includere sempre il doctype all’inizio di qualsiasi file HTML, la versione più semplice, rapida e che consiglio, è quella introdotta con HTML 5:

<!DOCTYPE html>

Mentre quella utilizzata per molto tempo di XHTML1 è

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Omettere il doctype può causare problemi con tabelle, inputs o altri elementi deformati.