вы также можете использовать старый добрый micro clearfix для этого.

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

см. обновленную скрипку:http://jsfiddle.net/XB9wX/97/

один аккуратный трюк для отключения коллапса полей, который не имеет визуального воздействия, насколько я знаю, устанавливает заполнение родителя в 0.05px:

.parentClass {
    padding: 0.05px;
}

прокладка больше не 0, поэтому коллапс больше не произойдет, но в то же время прокладка достаточно мала, чтобы визуально она округлилась до 0.

если требуется какое-то другое заполнение, то применяйте заполнение только к "направлению", в котором не требуется свертывание поля, например padding-top: 0.05px;.

пример:

.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: изменил значение с 0.1 to 0.05. Как Крис Морган упомянул в комментарии ниже, и от этот небольшой тест, кажется, что действительно Firefox принимает 0.1px обивка во внимание. Хотя,0.05px кажется, делает трюк.

overflow:hidden предотвращает коллапс полей, но он не свободен от побочных эффектов, а именно... скрывает переполнение.

отдельно от этого и того, что вы упомянули, вам просто нужно научиться жить с этим и учиться на этот день, когда они действительно полезны (приходит каждые 3-5 лет).

каждый браузер на основе webkit должен поддерживать свойства-webkit-margin-collapse. Есть также подсвойствами установить только на верхнюю или нижнюю границу. Вы можете дать ему значения collapse (по умолчанию), discard (устанавливает маржу в 0, если есть соседняя маржа) и separate (предотвращает коллапс маржи).

Я проверил, что это работает на версиях 2014 Chrome и Safari. К сожалению, я не думаю, что это будет поддерживаться в IE, потому что это не основано на движок WebKit.

читать ссылка на CSS Safari от Apple для полного объяснения.

Если вы проверяете страница расширений CSS webkit Mozilla, они перечисляют эти свойства как проприетарные и рекомендуют не использовать их. Это потому, что они, скорее всего, не собираются переходить в стандартный CSS в ближайшее время, и только браузеры на основе webkit будут поддерживать их.

Я знаю, что это очень старый пост, но просто хотел сказать, что использование flexbox на родительском элементе отключит сжатие полей для его дочерних элементов.

у меня была аналогичная проблема с крахом маржи из-за наличия родителя position установить в относительное. Вот список команд, которые можно использовать для отключения свертывания полей.

ВОТ ПЛОЩАДКА ДЛЯ ТЕСТИРОВАНИЯ

просто попробуйте назначить любой parent-fix* класс div.container элемент, или любой класс children-fix* to div.margin. Выберите тот, который лучше всего соответствует вашим потребностям.

, когда

• рентабельность рушится is отключен, div.absolute С красным фоном будет расположен в самой верхней части страницы.
• маржа рушится div.absolute будет располагаться в той же координате Y, что и 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>

здесь jsFiddle С примером вы можете редактировать

на самом деле, есть один, который работает безотказно:

дисплей: гибкий; флекс-направление: колонка;

пока вы можете жить с поддержкой только IE10 и выше

.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>

для вашей информации вы можете использовать сетка, но с побочными эффектами:)

.parent {
  display: grid
}