Ultime due proprietà da analizzare relative al box-model nel css. L’ultima volta il post era dedicato alla proprietà border, mentre oggi tocca a padding e margin. Le ho accorpate insieme perché, come vedrete, abbastanza simili.

Con riferimento alla figura iniziale mostrata nell’articolo sul box-model, il padding è definibile come l’ampiezza dello spazio vuoto fra l’area dei contenuti e il bordo.

Ammette come valori solo lunghezze (px, em ecc) e percentuali e quando espressa in questo ultimo caso, la percentuale si riferisce alla larghezza del box padre.

Tale proprietà accetta da uno fino a quattro valori :

• unico valore – indica il padding per tutti e 4 i lati
• due valori – indicano lo spazio per i lati superiore e inferiore (il primo) e quello per i lati destro e sinistro (il secondo)
• tre valori – indicano, rispettivamente, lo spazio per il lato superiore, quello per i lati destro e sinistro e quello per il lato inferiore
• quattro valori – indicano, rispettivamente, lo spazio per il lato superiore, quello per il lato destro, quello per il lato inferiore e infine per il lato sinistro (senso orario).

Infine, volendo, il padding può essere espresso per i singoli lati anche tramite le proprietà : padding-top, padding-right, padding-left, padding-bottom.

Passiamo ora alla proprietà margin e vi consiglio sempre di far riferimento alla figura introduttiva dell’articolo sul box model suggerito prima.

Tale proprietà indica lo spazio minimo che ci deve essere fra il box cui la proprietà è assegnata e gli altri box presenti all’interno della pagina.

Ammette come valori solo lunghezze (px, em ecc) e percentuali e quando espressa in questo ultimo caso, la percentuale si riferisce alla larghezza del box padre. Quando non viene espresso alcun valore, assume il valore di default cioè il browser assegnerà il valore predefinito per l’elemento cui la proprietà è assegnata

Tale proprietà accetta da uno fino a quattro valori :

• unico valore – indica il margine per tutti e 4 i lati
• due valori – indicano lo spazio per i lati superiore e inferiore (il primo) e quello per i lati destro e sinistro (il secondo)
• tre valori – indicano, rispettivamente, lo spazio per il lato superiore, quello per i lati destro e sinistro e quello per il lato inferiore
• quattro valori – indicano, rispettivamente, lo spazio per il lato superiore, quello per il lato destro, quello per il lato inferiore e infine per il lato sinistro (senso orario).

Infine, volendo, il padding può essere espresso per i singoli lati anche tramite le proprietà : margin-top, margin-right, margin-left, margin-bottom.