Per quale motivo le regole di compressione del margine sono state introdotte nei CSS?

Question

Non riesco a capire la situazione quando questo intelligente insieme di regole può essere utile. Rompono la semplicità del modello di box e forniscono una fonte infinita di problemi quando si uniscono diversi pezzi di layout. Quindi qual è la ragione?

Rules per il riferimento.

Aggiornamento: le regole sono abbastanza logiche per gli elementi di pari livello, 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> 

div di primo livello sono distanziati l'uno dall'altro da 100px.

Answer 1

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

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

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

Se il margine viene contato al limite dell'elemento genitore, inserire elementi in un elemento div introdurrebbe una spaziatura aggiuntiva tra gli elementi anche se lo stesso div non ha margine o riempimento. I margini attorno a un elemento dovrebbero rimanere invariati se si aggiunge un intorno div senza stile.

Answer 2

Quando potrebbe essere utile?

L'esempio più semplice: un elenco di paragrafi e intestazioni, ognuna con un margin-top e margin-bottom. Vuoi un margine nella parte superiore e inferiore dell'articolo e tra diversi elementi.

Con la compressione del margine, è possibile fare a meno di impostare margini speciali sul primo o sull'ultimo elemento (NON una parte delle specifiche CSS originali!) O il riempimento del contenitore.

Ma concordo, nel complesso, è una caratteristica inutile.

Answer 3

Considerare un corpo di testo contenente più paragrafi. Si desidera che ogni paragrafo sia separato da 2em e si desidera che il primo paragrafo sia separato dal contenuto precedente da 2em e che l'ultimo paragrafo sia separato dal contenuto seguente da 2em.

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

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

Se margini non collassano, questo comporterebbe margini essendo separate da uno spazio di 4em, non 2em. Senza il crollo dei margini, l'unico modo per ottenere l'effetto desiderato sarebbe quello di stabilire alcune regole aggiuntive per il primo e l'ultimo paragrafo, che implicherebbero di dare loro una classe o un id (che dovrebbe essere mantenuto se il testo è stato mai alterato) , o avvolgendoli in un elemento aggiuntivo altrimenti inutile e usando: first-child e: last-child, o ... beh, si ottiene l'idea.

posso garantire che, se il margine di collasso non si è verificato, così sarebbe avere un sacco di domande duplicate chiedere soluzioni alternative per raggiungere la spaziatura coerente che la regola di cui sopra fornisce :-)