"padding"          

padding1em 2em 2em;

valori: [lunghezze] || [percentuali] || inherit || EREDITATA

Video guide   xx - xx

vedi anche padding-top - padding-right - padding-bottom - padding-left

padding:5px 10px 15px 20px;
top padding è 5px (sopra)
right padding è 10px (destro)
bottom padding è 15px (sotto)
left padding è 20px (sinistro)
  padding:5px 10px 15px;
top padding è 5px (sopra)
right e left paddings sono 10px (sinistro e destro)
bottom padding è 15px (sotto)
     
padding:5px 10px;
top e bottom paddings sono 5px (sopra e sotto)
right e left paddings sono 10px (destro e sinistro)
  padding:10px;
tutti i padding sono 10px

 

Esempio 57: usiamo le tipiche proprietà Css che creano dei layout applicate in questo esempio al tag "P" (paragrafi). Le proprietà trasformano l'area intorno agli oggetti formando dei blocchi colorati con testo giustificato e spaziato (altezza linea con line-height).   Risultato

Esempio 56: usiamo le tipiche proprietà Css che creano dei layout applicate in questo esempio ai tag "P" e "A" (paragrafi e link). Le proprietà trasformano l'area intorno agli oggetti formando dei blocchi con bordo colorato. Le due "A" sono oggetti "inline" che vengono trasformati in "block" grazie alla proprietà "display".  Risultato

Esempio 46: usiamo 3 classi tutte collegate allo stesso elemento (div) per: centrare una intestazione (il suo contenitore) + centrare il testo + padding.  Risultato

Esempio 43: di default i browser applicano degli stili di base vediamo in questo esempio cosa succede se eliminiamo le due proprietà (margin e padding) usate per la spaziatura (esterna ed interna) degli oggetti. Risultato (pagina normale)