Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

il padding nel box model

12 luglio 2011, Scritto da , category css

Il padding è, come visto nello schema del box model, la distanza che intercorre tra il bordo del riquadro e la scrittura del testo. In pratica è lo stesso concetto visto per il cellpadding delle tabelle html.

Il comportamento del padding, a livello di definizioni e proprietà, è del tutto analogo a quello dei margini e le regole che si possono definire sono le stesse quattro relative, possiamo dire, ai punti cardinali, ovvero:

padding-top
padding-right
padding-bottom
padding-left

da cui risulterà, per esempio

div {
padding-top: 10px; 
padding-right: 20px;
padding-bottom: 10px;
padding-left:20px;
}
/*oppure, in forma compatta*/
div {padding: 10px 20px 10px 20px}
/*o ancora, in forma abbreviata nel caso in cui i valori siano uguali */
div {padding:10px}

Per il padding vale lo stesso discorso del margin, ovvero, non è una proprietà ereditabile e, di default, ha valore pari a zero.