Margin: gestire i margini con i CSS

24 giugno 2013

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.

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;}

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.

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à.

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;}

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.

Tutte le lezioni

1 ... 15 16 17 ... 33

Se vuoi aggiornamenti su Margin: gestire i margini con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Margin: gestire i margini con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy