Możesz również użyć starego dobrego Micro clearfix do tego celu.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Zobacz zaktualizowaną wersję: http://jsfiddle.net/XB9wX/97/

Jedną z ciekawych sztuczek, aby wyłączyć zwijanie marginesów, które nie ma żadnego wpływu wizualnego, o ile wiem, jest ustawienie padding rodzica na 0.05px:

.parentClass {
    padding: 0.05px;
}

Padding nie jest już 0, więc zapadanie się nie będzie już miało miejsca, ale jednocześnie padding jest na tyle mały, że wizualnie zaokrągly się do 0.

Jeśli pożądane jest inne wypełnienie, zastosuj wypełnienie tylko do "kierunku", w którym załamanie się marginesu nie jest pożądane, na przykład padding-top: 0.05px;.

Praca przykład:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Edit: zmieniono wartość z 0.1 na 0.05. Jak wspomniał Chris Morgan w komentarzu poniżej, i z tego małego testu, wydaje się, że rzeczywiście Firefox bierze pod uwagę 0.1px padding. Ale wydaje się, że to działa.

overflow:hidden zapobiega zapadaniu się marginesów, ale nie jest wolny od skutków ubocznych-mianowicie... ukrywa przepełnienie.

Oprócz tego i tego, o czym wspomniałeś, musisz się tylko nauczyć żyć z tym i uczyć się na ten dzień, kiedy są rzeczywiście przydatne (przychodzi co 3 do 5 lat).

Każda przeglądarka oparta na webkit powinna obsługiwać właściwości-webkit-margin-collapse. Istnieją również podprogramy, aby ustawić go tylko dla górnego lub dolnego marginesu. Można mu nadać wartości collapse (domyślne), discard (ustawia margines na 0, jeśli istnieje sąsiedni margines) i separate (zapobiega zwinięciu marginesu).

Przetestowałem, że działa to na wersjach Chrome i Safari 2014. Niestety, nie wydaje mi się, aby to było obsługiwane w IE, ponieważ nie jest oparte na webkit.

Czytaj Safari CSS Reference dla pełnego wyjaśnienia.

Jeśli zaznaczysz stronę rozszerzeń CSS Webkit Mozilli, zaznaczą te właściwości jako zastrzeżone i zalecają, aby ich nie używać. Dzieje się tak, ponieważ prawdopodobnie nie wejdą do standardowego CSS w najbliższym czasie i tylko przeglądarki oparte na webkit będą je obsługiwać.

Wiem, że jest to bardzo stary post, ale chciałem tylko powiedzieć, że używanie flexbox na elemencie nadrzędnym wyłączyłoby zwijanie marginesów dla jego elementów potomnych.

Miałem podobny problem z załamaniem marginesu, ponieważ rodzic ma position ustawiony na relative. Oto lista poleceń, których możesz użyć, aby wyłączyć zwijanie marginesu.

OTO PLAC ZABAW DO PRZETESTOWANIA

Po prostu spróbuj przypisać dowolną parent-fix* klasę do div.container elementu, lub dowolną klasę children-fix* do div.margin. Wybierz ten, który najlepiej pasuje do Twoich potrzeb.

Kiedy

• margines upadek jest wyłączony, div.absolute z czerwonym tłem będzie umieszczony na samej górze strony.
• margines się zapada div.absolute będzie umieszczony w tej samej współrzędnej Y co div.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Oto jsFiddle za pomocą przykładu możesz edytować

Właściwie, jest taki, który działa bezbłędnie:

Wyświetlacz: flex; flex-direction: column;

tak długo, jak można żyć z obsługą tylko IE10 i up

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Dla Twoich informacji możesz użyć siatka ale z efektami ubocznymi:)

.parent {
  display: grid
}