Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 16 di 33
  • livello principiante
Indice lezioni

Margin: gestire i margini con i CSS

Come spaziare i vari elementi tra loro: le cinque proprietà dell'elemento margin
Come spaziare i vari elementi tra loro: le cinque proprietà dell'elemento margin
Link copiato negli appunti

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.

Esempi.


Ti consigliamo anche