CSS Ränder nicht kollabieren

Question

Ich benutze Klammern auf Mac und benutze Safari.

Ich habe einige einfache Medienobjekte erstellt und horizontal gestapelt. Ich habe 5px Rand hinzugefügt, aber der Abstand zwischen ihnen sieht 10px. Warum kollabieren die Ränder nicht?

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    width: 800px; 
 
    background-color: blue; 
 
    overflow: hidden; 
 
} 
 

 
aside { 
 
    float: left; 
 
    background-color: yellow; 
 
    width: calc(20% - 10px); 
 
    margin: 5px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
main { 
 
    float: left; 
 
    background-color: greenyellow; 
 
    width: calc(80% - 10px); 
 
    margin: 5px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <aside></aside> 
 
    <main></main> 
 
</div>

Answer 1

CSS Rand Kollabieren nur tritt vertikal & unter Umständen 3:

Angrenzend Geschwister: Die Ränder benachbarter Geschwister kollabiert sind (außer, wenn der spätere Geschwister muss Vergangenheit Schwimmern werden gelöscht). Zum Beispiel:

<p>The bottom margin of this paragraph is collapsed...</p> 
<p>...with the top margin of this paragraph.</p> 

Eltern und erste/letzte Kind: Wenn es keine Grenze, Polsterung, Inline-Inhalt, block_formatting_context vom Rand erstellt oder Spiel um die margin-top eines Blocks zu trennen -top des ersten untergeordneten Blocks oder ohne Rahmen, Auffüllen, Inline-Inhalt, Höhe, minimale Höhe oder maximale Höhe, um den unteren Rand eines Blocks vom unteren Rand des letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert . Der reduzierte Rand endet außerhalb des übergeordneten Elements.

Leere Blöcke: Wenn kein Rahmen, Padding, Inline-Inhalt, Höhe oder Mindesthöhe den oberen Rand eines Blocks von seinem unteren Rand trennt, werden der obere und untere Rand des Blocks minimiert.

Werfen Sie einen Blick auf Margin Collapsing here in MDN.

In Ihrem Fall werden sie nicht zusammenbrechen, sollten Sie besser die Anwendung Marge in der Reihe letzten Punkt nur auf einer Seite ohne:

aside { 
    float: left; 
    background-color: yellow; 
    width: calc(20% - 10px); 
    margin-right: 5px; 
    padding: 10px; 
    box-sizing: border-box; 
} 

aside.last { 
    margin-right: 0; 
} 

Answer 2

Margins kollabieren nur vertikal, nicht horizontal. Sie haben 5px Rand auf alle Seiten von <aside> und <main> also dort sollte10px von Raum sein.

<aside> left margin + <main> right margin = 10px

Oh, und Ränder (vertikale sind) nicht für Floats kollabieren.