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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

Вместо этого используйте "Заполнение"

Это означает, что вместо 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 */.

Дополнительная литература

Посмотрите эти другие questions на переполнение стека

Ответ 4

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

Более подробно:

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

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

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

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

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

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

Ответ 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) переполнение: auto

4) float: left

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

Ответ 6

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

position:fixed;