Как разблокировать маржу?

Коллапс полей в CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Я понимаю цель этой функции, но я пытаюсь сделать макет, и я не могу понять, как отключить его.

Как правило, объясняется в учебниках CSS:

  1. Добавить границу
  2. Добавить дополнение

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

Есть ли способ просто отключить свертывание без необходимости вставлять лишние пиксели в макет? Для меня не имеет никакого смысла визуально влиять на документ, чтобы изменить поведение, подобное этому.

Ответы

Ответ 1

хорошо вам нужно что-то среднее между "сломать" рушится.

моя первая мысль заключалась в том, чтобы использовать div с display:none между ними нет, но это, похоже, не работает.

поэтому я попробовал:

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

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

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Ответ 2

Из IE8 вы можете сделать:

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

С CSS:

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

Ответ 3

Эрик Мейер ссылается на ваш точный момент в своей статье Uncollapsing marginins.

См. текст статьи после рисунка 6 для его подхода. Он упоминает, что 1px padding/border обычно является способом выхода, но предлагает довольно простое решение для случаев, когда нет никакой гибкости в добавлении этого дополнительного пикселя.

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

Ответ 4

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

.parentClass {
    padding: 0.05px;
}

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

Если требуется какое-то другое дополнение, то применяйте дополнение только к "направлению", в котором не требуется разваливание padding-top: 0.05px;, например 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>

Ответ 5

Используйте макет Flex или Grid.

В гибких и сетчатых контейнерах нет такой вещи, как крах.

Подробнее о спецификациях:

3. Контейнеры Flex: значения display flex и inline-flex

Контейнер flex устанавливает новый контекст форматирования Flex для его содержимого. Это то же самое, что и создание контекста форматирования блоков, за исключением того, что вместо макета блока используется гибкая макет. Например, поплавки не вторгаются в контейнер flex, а поля гибких контейнеров не сворачиваются с полями его содержимого.

5.1. Создание контейнеров с grid: значения отображения grid и inline-grid

Контейнер сетки устанавливает новый контекст форматирования сетки для своего содержимого. Это то же самое, что и создание контекста форматирования блоков, за исключением того, что вместо компоновки блоков используется макет сетки: поплавки не вторгаются в контейнер сетки, а поля контейнеров сетки не сворачиваются с полями его содержимого.