Как мне отменить сокращение маржи?[дубликат]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

Вопрос

На этот вопрос уже есть ответ здесь:

Сворачивание полей в CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

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

Способ, обычно объясняемый в руководствах по CSS, заключается в том, чтобы либо:

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

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

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

Это было полезно?

Решение

ну, вам нужно что-то среднее, чтобы «сломать» коллапс.

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

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

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

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

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

Другие советы

Из 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;
}

Используйте гибкую или сетчатую компоновку.

В контейнерах flex и grid нет такого понятия, как сворачивание полей.

Более подробная информация приведена в спецификациях:

3.Гибкие контейнеры:тот самый flex и inline-flex display ценности

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

5.1.Установка Сетчатых контейнеров:тот самый grid и inline-grid отображение значений

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

Эрик Мейер ссылается на вашу точную точку зрения в своей статье. Разворачивающиеся поля.

Его подход см. в тексте статьи после рисунка 6.Он упоминает, что обычно лучше использовать отступы/рамки размером в 1 пиксель, но предлагает довольно простое решение для случаев, когда нет гибкости в добавлении дополнительного пикселя.

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

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

Редактировать: изменил значение с 0.1 к 0.05.От этот небольшой тест, кажется, что Firefox берет на себя 0.1px заполнение во внимание.Хотя, 0.05px кажется, делает свое дело.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top