Anzitutto, qual è la differenza nel comportamento dei due comandi?
- <margin>: è relativo allo spazio che intendiamo lasciare tra il bordo dell’area cui si riferisce il parametro e l’esterno;
- <padding>: è relativo allo spazio che intendiamo lasciare tra il bordo ed il contenuto dell’area.
Entrambi i comandi si riferiscono quindi ad un’area della nostra pagina web (identificata con i comandi <div> o <p>), ed accettano 4 possibili parametri, rispettivamente lo spazio che vogliamo lasciare in alto (top), a destra (right), in basso (bottom) ed a sinistra (left): ad esempio
- margin-top 3px;
- margin-right 4px;
- margin-bottom 5px;
- margin-left 6px;
E’ possibile riunire in una forma sintetica i 4 parametri:
- margin 3px 4px 5px 6px;
Per ricordare la sequenza corretta dei parametri si può utilizzare una parola chiave, “trouble”, le cui consonanti sono le iniziali dei valori:
trouble = top right bottom left