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

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

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

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

Вот несколько способов обхода проблемы

Используйте 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 */.

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

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

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

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

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

Контекст форматирования блока - это просто все элементы уровня блока (например, div, 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

«Свертывающиеся поля» - ваша проблема. Здесь вы можете понять, что это такое и почему он все еще жив: 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

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

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

position:fixed;