I margini CSS si sommano o sono combinati?

Question

Supponiamo di avere il seguente codice:

<div style="margin-bottom:100px;">test</div> 
<div style="margin-top:100px;">test</div> 

ho notato che a volte crea 100px di margine tra gli elementi e qualche volta è 200px (quando usiamo alcune impostazioni che non sono a conoscenza). Non riesco a trovare alcuna informazione a riguardo nelle specifiche. Da cosa dipende?

Se disponiamo di h1 e p in un documento vuoto, il margine di h1 verrà combinato con il margine di p. Non si sommano. Verrà utilizzato quello che è più grande.

Answer 1

Questo sta accadendo perché i margini possono crollare. Certi margini possono sovrapporsi (per lo più elementi di blocco) e formare un margine combinato definito dal più grande dei due valori definiti nelle regole di stile degli elementi calcolati - questo è ciò che sta accadendo qui. This section dal documento CSS Box Model lo spiega in dettaglio.

Edit: Come punto di interesse, è possibile aggirare questo senza rompere le cose in un paio di modi

• Rendere gli elementi (cioè rompere i margini comprimibili.) (molto?) width: 100%; display: inline-block
• Inserire un blocco height: 0; width: 0; overflow: hidden tra gli elementi e inserire un punto o qualcosa in esso.

I biforcuta ashley fiddle da dimostrare. Ci sono probabilmente altri metodi, ma questi sono un modo veloce per aggirare i margini collassabili se necessario.