Margin CSS, margini top, right, bottom e left nei CSS

La proprietà margin nei CSS serve a creare spazio attorno agli elementi e quindi a distanziare un elemento da ciascun lato o da uno solo di essi.

Si possono infatti impostare i margini per ciascun lato: top, right, bottom e left e per ciascuno di essi si può indicare un valore in percentuale oppure in pixel, em, cm, ecc.

Margin CSS esempi

Facciamo dunque degli esempi pratici, impostando i margini per ciascun lato. Inoltre è bene dire che il senso è orario partendo dall’alto (top).

div {
  margin: 100px 20px 40px 70px;
}

Quindi in questo caso si avrà un margine dall’alto di 100 pixel, da destra di 20 pixel, dal basso di 40 pixel e da sinistra di 70 pixel.

Si può indicare anche un solo valore se il margine deve essere uguale per tutti i lati, come da esempio sotto:

div {
  margin: 50px;
}

Oppure si possono indicare anche due valori come da esempio:

div {
  margin: 100px 20px;
}

In questo caso vuol dire che il margine sopra e sotto è di 100 pixel, mentre il margine di destra e sinistra è di 20 pixel.

Si possono anche indicare 3 valori:

div {
  margin: 100px 20px 60px;
}

In questo modo il margine superiore è di 100 pixel, il margine destro e sinistro è di 20 pixel mentre il margine inferiore è di 60 pixel.

Oltre alla proprietà margin CSS ci sono altre proprietà simili che consentono di impostare solo il margine di uno dei lati. Vediamoli in dettaglio.

Margin-top

Se si deve specificare solo il margine superiore si può usare anche solo la proprietà margin-top con il suo valore.

div {
  margin-top: 100px;
}

Margin-right

Allo stesso modo se si ha la necessità di impostare solo il margine destro.

div {
  margin-right: 50px;
}

Margin-bottom

Dunque lo stesso per il margine inferiore:

div {
  margin-bottom: 20px;
}

Margin-left

Infine la stessa cosa per il margine sinistro:

div {
  margin-left: 20px;
}

Conclusioni

In questa lezione abbiamo visto come usare la proprietà margin dei CSS per impostare la distanza dagli altri elementi della pagina. Nel corso del nostro tutorial sui CSS vedremo tante applicazioni pratiche.

Lezione precedente: pseudo-classe first child

Lezione successiva: proprietà padding