Кто-нибудь может объяснить, почему div сбрасывается? Кажется, что верхнее поле заголовка должно упираться в верхнюю часть div, а не в окно браузера.
Обертывание другого div вокруг div не имеет значения.
Но если я добавлю padding-top:1px; в div, проблема исчезнет!
Попробуйте добавить overflow:auto к родительскому элементу.
CSS: Margin-top, когда у родителя нет границы
Вы также можете использовать overflow:hidden. Использование атрибута overflow в родительском элементе также очистит внутренние плавающие элементы, что сделает clear:both ненужным.
Это новый ответ на этот вопрос, потому что поле элемента перемещает всю страницу down был помечен как дубликат этого вопроса, но я не думаю, что принятый ответ объясняет, почему это происходит, поэтому вот более подробное объяснение того, почему у вас иногда есть родитель элемент имеет странный необъяснимый пробел, если у первого дочернего элемента есть свернутое поле.
Это связано с контекстом блочного форматирования (также здесь). в основном то, что вы видите, это схлопывание полей в действии. Предполагается, что сворачивающиеся поля помогают сворачивать текстовые элементы вместе, чтобы у вас не было двойных полей для таких вещей, как абзацы и заголовки, но проблема в том, что это сворачивает абзац к родителю, заставляя родителя эффективно принять поля абзаца:
Родительский и первый/последний дочерний Если нет границы, заполнения, встроенной части, созданного контекста форматирования блока или зазора для отделения верхнего поля блока от верхнего края его первого дочернего блока. ; или нет границы, отступов, встроенного содержимого, высоты, минимальной высоты или максимальной высоты, чтобы отделить нижнее поле блока от нижнего края поля его последнего дочернего элемента, тогда эти поля разрушаются. Свернутое поле выходит за пределы родителя.
Управление свертыванием полей – MDN
Одним из решений вашей проблемы было бы создание нового контекста форматирования блока для родителя. Вы можете сделать это легко, добавив overflow: auto к родителю. Вполне вероятно, что родительский элемент не имеет установленной высоты, поэтому визуально это не должно влиять на документ. Все, что он сделает, это создаст новый контекст, который приведет к тому, что поле первого дочернего элемента будет содержаться в родительском.
