Nei CSS, le proprietà legate ai margini consentono di impostare con precisione la distanza tra gli elementi. Possiamo infatti definire il margine come la distanza tra il bordo di un elemento e gli elementi adiacenti.
Sono cinque le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima, margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.
CSS margin-top
Imposta la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.
Sintassi ed esempi
selettore {margin-top: valore;}I valori possibili sono:
- un valore numerico con unità di misura: il valore è espresso in termini assoluti;
- un valore in percentuale: il valore è calcolato come percentuale rispetto alla larghezza (
width) del blocco contenitore; - auto: il browser calcola automaticamente la distanza.
div {margin-top: 20px;}
p {margin-top: 10%;}
img {margin-top: auto;}CSS margin-right
Definisce la distanza tra il lato destro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.
Sintassi ed esempi
selettore {margin-right: valore;}I valori possono essere espressi con:
- un valore numerico con unità di misura;
- un valore in percentuale;
- auto.
div {margin-right: 20px;}
p {margin-right: 10%;}
img {margin-right: auto;}Assegnando il valore auto per questa proprietà e per margin-left su elementi che abbiano una larghezza (width) specificata, si ottiene l'effetto di centrare orizzontalmente un box.
CSS margin-bottom
Definisce la distanza tra il lato inferiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.
Sintassi ed esempi
selettore {margin-bottom: valore;}I valori possono essere espressi con:
- un valore numerico con unità di misura;
- un valore in percentuale;
- auto.
div {margin-bottom: 20px;}
p {margin-bottom: 10%;}
img {margin-bottom: auto;}Ricordiamo che se per un elemento si imposta un margine inferiore ed esso si trova sopra ad un altro elemento che abbia impostato un margine superiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà.
CSS margin-left
Definisce la distanza tra il lato sinistro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.
Sintassi ed esempi
selettore {margin-left: valore;}I valori possibili sono:
- un valore numerico con unità di misura;
- un valore in percentuale;
- auto.
div {margin-left: 20px;}
p {margin-left: 10%;}
img {margin-left: auto;}CSS margin
È una proprietà a sintassi abbreviata. Con essa è possibile specificare in una sola regola i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata. I tipi di valori esprimibili sono gli stessi visti per le proprietà singole.
Sintassi ed esempi
La sintassi di base per questa proprietà è la seguente:
selettore {margin: valore-1, valore-2, valore-3, valore-4;}Per usare al meglio questa proprietà è fondamentale conoscere le regole che ne gestiscono il funzionamento.
In prima istanza è ovvio usare per essa quattro valori, uno per ciascun lato:
div {margin: 10px 15px 10px 20px;}L'ordine di lettura va inteso in senso orario. Per cui: il primo valore si riferisce al lato superiore, il secondo a quello destro, il terzo al lato inferiore, il quarto a quello sinistro. In pratica, usare la sintassi vista nell'esempio equivale a scrivere:
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 20px;
}Nella definizione dei valori, inoltre, è possibile mischiare percentuali con valori assoluti in unità di misura.
Un'ulteriore abbreviazione della sintassi si può ottenere usando tre, due o un solo valore. Queste le regole:
- se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore;
- se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro;
- se si usa un solo valore, un uguale distanza sarà applicata ai quattro lati.