padding
Il padding rappresenta un rientro (una sorta di bombatura verso l’interno) del contenitore rispetto al suo contenuto. L’utilizzo di padding è analogo a quello di margin. Abbiamo quindi una short definitionpadding con le stesse modalità di margin:
Se è definito un solo valore, esso viene applicato per tutti e 4 i padding
article{
padding: 10px;
}
Se sono definiti 2 valori, vengono prese le coppie di padding opposti
article{
padding:5px 10px;
}
Se sono definiti 3 valori, il secondo ed il quarto valore sono uguali
article{
padding:2px 4px 8px;
}
Se sono definiti 4 valori, ogni padding viene rappresentato e letto in senso orario, partendo da quello sopra
article{
padding:2px 4px 8px 10px;
}
Da queste definizioni puoi dedurre che esistono anche le singole proprietà: padding-top, padding-right, padding-bottom, padding-left.
Anche qui vige lo stesso ragionamento di margin: se devi definire un solo padding, puoi usare direttamente la singola proprietà, invece che quella completa. L’unica differenza rispetto a margin è che non puoi usare valori negativi.