Con le proprietà margin definiamo la distanza tra i bordi di un elemento e gli altri elementi adiacenti
| margin-top | con questa proprietà definiamo il margine al di sopra dell'elemento |
| margin-bottom | con questa proprietà definiamo il margine al di sotto dell'elemento |
| margin-left | con questa proprietà definiamo il margine a sinistra dell'elemento |
| margin-right | con questa proprietà definiamo il margine a destra dell'elemento |
| margin | proprietà a sintassi abbreviata è serve per definire le precedenti proprietà tutte assieme |
| numerico con unità di misura | il valore è espresso con valore numerico seguito dalla sua unità di misura es. 100px |
| percentuale | il valore è calcolato come percentuale rispetto alla larghezza "width" del blocco contenitore |
| auto | il browser calcola automaticamente la distanza |
Con l sintassi abbeviata è possibile esprimere tutte le proprietà di margin in un unica formula
SELETTORE { MARGIN: TOP LEFT BOTTOM RIGHT; }
/* Esempio sintassi abbreviata */
h1 {
margin: 10px 2px 10px 2px;
}
/* che è l'equivalente di scrivere..*/
h1 {
margin-top: 10px;
margin-left: 2px;
margin-bottom: 10px;
margin-right: 2px;
}
Sintassi:
2 VALORI
SELETTORE { MARGIN: VALORE VALORE; }
Utilizzando due valori essi si riferiranno rispettivamente a: 1° valore: top&bottom 2° valore: left&right
h1 {
margin: 10px 10px; } /* TOP&BOTTOM | LEFT&RIGHT */
3 VALORI
SELETTORE { MARGIN: VALORE VALORE VALORE; }
Utilizzando tre valori essi si riferiranno rispettivamente a: 1° valore: top 2° valore: left&right 3° valore: bottom
h1 {
margin: 10px 10px 10px; } /* TOP | LEFT&RIGHT | BOTTOM */
A differenza della proprietà margin con cui gestiamo lo spazio esterno ed attorno a i bordi nonchè lo spazio che di fatto separa l'elemento dagli oggetti adiacenti,
con il padding gestiamo lo spazio interno ai bordi e contenuto al contenuto stesso del box
Detto questo, le proprietà disponibili per il padding sono del tutto similari a quelle del margin incluse la formattazione per le sintassi abbreviate; di seguito le elenco:
| padding-top | per definire lo spazio al di sopra del contento |
| padding-bottom | per definire lo spazio al di sotto del contento |
| padding-left | per definire lo spazio a sinistra del contento |
| padding-right | per definire lo spazio a destra del contento |
| padding | per definire lo spazio attorno al contenuto per tutti e quattro i lati |