Я знаю, что это старая проблема, я сталкивался с ней много раз. Проблема в том, что все исправления здесь - это хаки, которые могут иметь непредвиденные последствия.
Прежде всего, есть простое объяснение проблемы с корнем. Благодаря тому, как работает сворачивание полей, если первый элемент внутри контейнера имеет верхнее поле, то это верхнее поле эффективно применяется к самому родительскому контейнеру. Вы можете проверить это самостоятельно, выполнив следующие действия:
<div>
<h1>Test</h1>
</div>
В отладчике откройте это и наведите div. Вы заметите, что сам div на самом деле находится там, где верхнее поле элемента H1 останавливается . Это поведение предназначено браузером.
Так что это легко исправить, не прибегая к странным взломам, как это делает большинство постов здесь (без оскорблений, это просто правда) - просто вернитесь к исходному объяснению - ...if the first element inside a container has a top margin... - После этого поэтому вам понадобится первый элемент в контейнере, чтобы НЕ имел верхнее поле. Хорошо, но как это сделать без добавления элементов, которые семантически не мешают вашему документу?
Легко! Псевдо-элементы! Вы можете сделать это через класс или предопределенный миксин. Добавьте :before псевдоэлемент:
CSS через класс:
.top-margin-fix:before {
content: ' ';
display: block;
width: 100%;
height: .0000001em;
}
При этом, следуя приведенному выше примеру разметки, вы изменили бы свой div следующим образом:
<div class="top-margin-fix">
<h1>Test</h1>
</div>
Почему это работает?
Первый элемент в контейнере, если у него нет верхнего поля, устанавливает позицию начала верхнего поля следующего элемента. Добавляя псевдоэлемент :before, браузер фактически добавляет несемантический (другими словами, полезный для SEO) элемент в родительский контейнер до вашего первого элемента.
Q. Почему высота: .0000001em?
A. Требуется высота, чтобы браузер выдвигал элемент поля вниз. Эта высота фактически равна нулю, но она все равно позволит вам добавить отступы к самому родительскому контейнеру. Поскольку он фактически равен нулю, он также не повлияет на макет контейнера. Красивые.
Теперь вы можете добавить класс (или лучше, в SASS / LESS, миксин!), Чтобы исправить эту проблему, вместо добавления странных стилей отображения, которые будут вызывать неожиданные последствия, когда вы захотите сделать что-то с вашими элементами, преднамеренно устраняя поля на элементах и / или их замена отступами или странными стилями позиции / плавающего типа, которые действительно не предназначены для решения этой проблемы.