Le proprietà CSS margin sono usate per creare spazio attorno agli elementi, all'esterno dei bordi definiti.

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

Margini - Lati individuali

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

• margin-top
• margin-right
• margin-bottom
• margin-left

Tutte le proprietà dei margini possono avere i seguenti valori:

• auto - il browser calcola i margini
• Lunghezza - 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

Esempio

Imposta margini differenti per tutti i quattro lati di un elemento

:

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

Margini - Proprietà abbreviata

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

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

• margin-top
• margin-right
• margin-bottom
• margin-left

Ecco come funziona:

Se la proprietà margin ha 4 valori:

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

Esempio

Usa la proprietà abbreviata del margine con 4 valori:

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

Se la proprietà margin ha 3 valori:

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

Esempio

Usa la proprietà abbreviata del margine con 3 valori:

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

Se la proprietà margin ha 2 valori:

• margin: 25px 50px;
  • I margini superiore e inferiore sono 25px
  • I margini destro e sinistro sono 50px

Esempio

Usa la proprietà abbreviata del margine con due valori:

p {
  margin: 25px 50px;
}

Se la proprietà margin ha 1 valore:

• margin: 25px;
  • tutti i 4 margini sono 25px

Esempio

Usa la proprietà abbreviata del margine con 1 valore:

p {
  margin: 25px;
}

Il valore auto

Si può impostare la proprietà margin ad auto per centrare orizzontalmente l'elemento all'interno del suo contenitore.

L'elemento prenderà quindi la larghezza specificata, e lo spazio rimanente sarà suddiviso equamente tra i margini sinistro e destro.

Esempio

Uso di margin: auto:

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

Il valore inherit

Questo esempio consente al margine sinistro dell'elemento <p class="ex1"> di essere ereditato dall'elemento genitore (<div>):

Esempio

Uso del valore inherit:

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

p.ex1 {
  margin-left: inherit;
}

Crollo dei margini in CSS

I margini superiore e inferiore degli elementi sono spesso ripiegati in un singolo margine che è uguale al più largo dei due margini.

Questo non accade sui margini sinistro e destro! Solo sui margini superiore e inferiore!

Osserviamo l'esempio:

Esempio

Dimostrazione del crollo del margine:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

Nel precedente esempio, l'elemento <h1> ha un margine inferiore di 50px e l'elemento <h2> ha un margine superiore impostato a 20px.

Il senso comune sembra suggerirci che il margine verticale tra <h1> e <h2> dovrebbe essere un totale di 70px (50px + 20px). Ma a causa del crollo del margine, il margine reale finisce a essere 50px.

Tutte le proprietà dei margini in CSS