Nei
, 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
.
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.
.