Ответ 1

Существует два основных типа разрыва маржи:

• Свертывание полей между соседними элементами
• Сбрасывание полей между родительскими и дочерними элементами

Использование прокладки или границы предотвратит сбой только в последнем случае. Кроме того, любое значение overflow, отличное от его значения по умолчанию (visible), примененного к родительскому объекту, предотвратит сбой. Таким образом, оба параметра overflow: auto и overflow: hidden будут иметь тот же эффект. Возможно, единственная разница при использовании hidden - это непредвиденные последствия скрытия содержимого, если родитель имеет фиксированную высоту.

Другие свойства, которые после применения к родителям могут помочь исправить это поведение:

• float: left / right
• position: absolute
• display: inline-block

Здесь вы можете протестировать все из них: http://jsfiddle.net/XB9wX/1/.

Я должен добавить, что, как обычно, исключением является Internet Explorer. Более конкретно, в полях IE 7 не сворачиваются, когда для родительского элемента задан какой-то макет, например width.

Источники: статья сайта Сводные поля

Ответ 2

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

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

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

Ответ 3

Насколько мне известно, 0.05px отключения сворачивания полей, который не оказывает визуального воздействия, является установка отступа родительского 0.05px в 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>

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

Ответ 7

Собственно, есть тот, который работает безупречно:

дисплей: flex; flex-direction: column;

пока вы можете жить с поддержкой только 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>

Ответ 8

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

ЗДЕСЬ ИГРАТЬ ВОСПРОИЗВЕДЕНИЕ

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

При

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

Ответ 9

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

.parent {
  display: grid
}