margin-top во вложенном div

Question

У меня проблема с margin-top во вложенном div - когда я применяю margin-top к вложенному div, поле применяется к родительскому div вместо вложенного div.

Есть идеи?

Answer 1

Я получаю решение с переполнением: auto в родительском div.

Answer 2

Поля будут разрушаться в соответствии с дизайном. Добавьте 1px отступа, и он должен работать нормально.

Answer 3

Вот как работают поля ... поле - это расстояние между следующим элементом с полем / отступом / аналогичным. Он не обязательно определяется как его родительский элемент. Обратитесь к спецификации .

Вот некоторые вещи, которые вы можете сделать в качестве обходного пути

Используйте Padding вместо

Это просто означает, что вместо margin-top: 10px; вы используете padding-top: 10px;. Это не подходит для любого случая.

Странный взлом, который я обнаружил

Я сомневаюсь, что обнаружил это изначально, но на днях я решил проблему следующим образом. У меня был <div id="header" />, который я тоже хотел задать верхнее поле, и его верхнее поле также толкало родительский элемент (элемент body) вниз. Итак, я сделал это на элементе body ...

body {
    padding-top: 1px;
    margin-top: -1px;
}

Это заставило мою маржу работать. Вы также можете попробовать использовать рамку, например border: 1px solid #ccc.

Также было бы целесообразно оставить примечание в комментариях CSS, чтобы объяснить, почему у вас есть эта особая пара правил. Я просто добавил /* this is to stop collapsing margins */.

Дальнейшее чтение

Ознакомьтесь с этими другими вопросами по переполнению стека

Answer 4

Причина переполнения: автоматическое изменение родительского элемента div для разрешения вложенного поля margin-top состоит в том, что создает новый контекст форматирования. Любой div, который позиционируется как абсолютный, фиксированный, с плавающей запятой или с переполнением, отличным от видимого, создает новый контекст форматирования. Затем родительский div становится корнем этого нового контекста форматирования, а сворачивающиеся поля не применяются к корневым элементам. *

Подробнее:

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

Контекстом форматирования блока являются просто все элементы уровня блока (например, div, p, table), расположенные один за другим вертикально внутри содержащего блока до конца документа / контейнера или до установления нового контекста форматирования.

В случае вложения вершина поля дочернего элемента сворачивается с вершиной поля родителя, поскольку оба элемента div являются частью контекста форматирования блока. Если для параметра overflow установлено значение auto, родительский div становится контейнером нового контекста форматирования, а дочерний - первым элементом блока внутри него. Таким образом, эти два поля больше не являются "смежными", так как родительский div теперь является корнем.

Надеюсь, это поможет.

Модель коробки: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Модель визуального форматирования: http://www.w3.org/TR/CSS2/visuren.html#normal-flow

Answer 5

"Сжимающиеся поля" - это ваша проблема. Здесь вы можете понять, что такое и почему оно все еще живо: http://www.sitepoint.com/web-foundations/collapsing-margins/

Я прочитал в Интернете, чтобы найти достойное решение, и наконец я нашел эту статью: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Короче говоря, у вас есть куча способов решить вашу проблему:

1) граница в родительском div (может быть прозрачной)

2) заполнение в родительском div

3) переполнение: авто

4) float: left

Вам следует перейти по ссылке, поскольку она подробно объясняет все решения.

Answer 6

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

position:fixed;