Per quale motivo nel CSS sono state introdotte le regole sul collasso dei margini?

Question

Non riesco proprio a capire la situazione in cui questo insieme intelligente di regole può essere utile. Rompono la semplicità del modello di scatola e forniscono una fonte infinita di problemi quando si combinano insieme diversi pezzi di layout. Quindi qual è il motivo?

Regole per il riferimento.

Aggiornamento: le regole sono abbastanza logiche per gli elementi fratelli, ma perché i margini dovrebbero propagarsi agli elementi padre fino all'albero? Che tipo di problemi risolve?

Ad esempio:

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

I div di livello superiore sono distanziati l'uno dall'altro di 100px.

Answer 1

Questa è una delle situazioni in cui non ha davvero senso finché non ti rendi conto che le alternative hanno meno senso.

Come probabilmente saprai, i margini specificano la distanza tra gli elementi, non è una "imbottitura esterna" che circonda ogni elemento. Se due elementi con il margine 20px sono uno accanto all'altro, la distanza tra loro è 20px, non 40px.

Dato che il margine è una distanza da un altro elemento, ha senso che la distanza sia dall'elemento agli elementi circostanti, non al limite dell'elemento genitore.

Se il margine fosse conteggiato al limite dell'elemento genitore, inserendo gli elementi in un elemento div si introdurrebbe una spaziatura aggiuntiva tra gli elementi anche se lo stesso div non ha margine o imbottitura. I margini attorno a un elemento dovrebbero rimanere gli stessi se aggiungi un div non modificato attorno ad esso.

Answer 2

Quando potrebbe essere utile?

L'esempio più semplice: un elenco di paragrafi e intestazioni, ciascuno con un margin-top e margin-bottom . Volete un margine in cima e in fondo all'articolo e tra diversi elementi.

Con il collasso dei margini, puoi fare a meno di impostare margini speciali sul primo o sull'ultimo elemento (NON una parte delle specifiche CSS originali!) o riempire il contenitore.

Ma sono d'accordo, nel complesso, è una funzione inutile.

Answer 3

Considera un corpo di testo contenente più paragrafi. Vuoi che ogni paragrafo sia separato da 2em e vuoi che il primo paragrafo sia separato dal contenuto precedente da 2em e l'ultimo paragrafo sia separato dal seguente contenuto da 2em.

Questo è facilmente realizzabile con il seguente CSS, perché i margini superiore e inferiore che separano i paragrafi crolleranno:

p {
    margin-top: 2em
    margin-bottom: 2em;
}

Se i margini non si riducessero, ciò comporterebbe la separazione dei margini da uno spazio di 4em, non di 2em. Senza il collasso del margine, l'unico modo per ottenere l'effetto desiderato sarebbe quello di stabilire alcune regole aggiuntive per il primo e l'ultimo paragrafo, che implicherebbe di dare loro una classe o un id (che dovrebbe essere mantenuto se il testo fosse mai stato modificato) o avvolgendoli in un elemento extra altrimenti inutile e usando: first-child e: last-child, o ... beh, hai capito.

Posso garantire che, se non si verificasse il collasso dei margini, SO avrebbe molte domande duplicate che richiedono soluzioni alternative per ottenere la spaziatura coerente fornita dalla regola sopra :-)