CSS Margine che crolla


Esempio

Quando due margini si toccano l'un l'altro verticalmente, vengono compressi. Quando due margini toccano orizzontalmente, non collassano.

Esempio di margini verticali adiacenti:

Considera i seguenti stili e markup:

div{
    margin: 10px;
}
<div>
    some content
</div>
<div>
    some more content
</div>

Saranno 10px a parte poiché i margini verticali crollano sopra l'uno e l'altro. (La spaziatura non sarà la somma di due margini).

Esempio di margini orizzontali adiacenti:

Considera i seguenti stili e markup:

span{
    margin: 10px;
}
<span>some</span><span>content</span>

Saranno 20px a parte poiché i margini orizzontali non collassano sull'uno e sull'altro. (La spaziatura sarà la somma di due margini).

Sovrapposizione con dimensioni diverse

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}
<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Questi elementi saranno distanziati di 15px verticalmente. I margini si sovrappongono il più possibile, ma il margine più ampio determinerà la spaziatura tra gli elementi.

Gotcha margine di sovrapposizione

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}
<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Quale sarà la spaziatura tra i due testi? (passa il mouse per vedere la risposta)

La spaziatura sarà 25px. Poiché tutti e quattro i margini si toccano, collassano, utilizzando quindi il margine maggiore dei quattro.

Ora, cosa succede se aggiungiamo alcuni bordi al markup sopra.

div{
    border: 1px solid red;
}

Quale sarà la spaziatura tra i due testi? (passa il mouse per vedere la risposta)

La spaziatura sarà di 59 px! Ora solo i margini di .outer-top e .outer-bottom si toccano e sono gli unici margini compressi. I margini rimanenti sono separati dai bordi. Quindi abbiamo 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (I 1px sono i confini ...)

Margini collassabili tra elementi padre e figlio:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

Nell'esempio sopra riportato, si applica solo il margine più ampio. Ci si può aspettare che il paragrafo si trovi a 60px da h1 (poiché l'elemento div ha un margine superiore di 40px e il p ha un margine superiore di 20px). Ciò non accade perché i margini collassano insieme per formare un margine.