Margini in CSS

Le proprietà CSS del margine vengono utilizzate per creare spazio intorno agli elementi, al di fuori di qualsiasi bordo definito.

Con CSS, hai pieno controllo sui margini. Ci sono proprietà per impostare il margine per ciascun lato di un elemento (superiore, destro, inferiore e sinistro).

Margine - Lati Singoli

CSS ha proprietà per specificare il margine per ciascun lato di un elemento:

• margin-top (margine superiore)
• margin-right (margine destro)
• margin-bottom (margine inferiore)
• margin-left (margine sinistro)

Tutte le proprietà del margine possono avere i seguenti valori:

• auto - il browser calcola il margine
• length - specifica un margine in px, pt, cm, ecc.
• % - specifica un margine in % della larghezza dell’elemento contenitore
• inherit - specifica che il margine dovrebbe essere ereditato dall’elemento genitore

⚠ Sono consentiti valori negativi.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margine - Proprietà Abbreviata

Per accorciare il codice, è possibile specificare tutte le proprietà del margine in una sola proprietà.

La proprietà del margine è una proprietà abbreviata per le seguenti proprietà del margine individuali:

• margin-top (margine superiore)
• margin-right (margine destro)
• margin-bottom (margine inferiore)
• margin-left (margine sinistro) Quindi, ecco come funziona se la proprietà del margine ha quattro valori:

p {
  margin: 25px 50px 75px 100px;
}

• il margine superiore è 25px
• il margine destro è 50px
• il margine inferiore è 75px
• il margine sinistro è 100px

Se la proprietà del margine ha tre valori:

p {
  margin: 25px 50px 75px;
}

• il margine superiore è 25px
• i margini destro e sinistro sono 50px
• il margine inferiore è 75px

Se la proprietà del margine ha due valori:

p {
  margin: 25px 50px;
}

• i margini superiore e inferiore sono 25px
• i margini destro e sinistro sono 50px

Se la proprietà del margine ha un solo valore:

p {
  margin: 25px;
}

• tutti e quattro i margini sono 25px

Il Valore auto

Puoi impostare la proprietà del margine su auto per centrare orizzontalmente l’elemento all’interno del suo contenitore.

L’elemento occuperà quindi la larghezza specificata e lo spazio rimanente sarà diviso equamente tra i margini sinistro e destro.

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Il Valore inherit

Questo esempio fa sì che il margine sinistro dell’elemento <p class="prova"> erediti dall’elemento genitore (<div>):

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.prova1 {
  margin-left: inherit;
}