it-roy-ru.com

Как отключить маржинальное свертывание?

Можно ли вообще отключить коллапс маржи? Единственные решения, которые я нашел (под названием «uncollapsing»), влекут за собой использование 1px border или 1px padding. Я считаю это неприемлемым: посторонний пиксель усложняет вычисления без веской причины. Есть ли более разумный способ отключить это разрушение полей?

151
kjo

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

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

Использование отступов или бордюров предотвратит коллапс только в последнем случае. Кроме того, любое значение 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

Источники: статья Sitepoint Сокращение полей

202
hqcasanova

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

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

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

48
Blackgrid

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

39
Nicu Surdu

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

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

20
Litek

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

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

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

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

8
Dan Carter

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

6
Genzo

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

дисплей: 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>

3
Daniel Koster

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

ЗДЕСЬ IS игровая площадка для тестирования

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

Когда

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

2
Buksy

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

.parent {
  display: grid
}
0
Whisher