Элемент с краем-маркером имеет поле вне поля для хранения

У меня есть что-то в этом роде:

#div {
   background: green; 
   width: 200px;
   height: 100px;
}

h1 {
   margin-top: 100px;
}

(И, очевидно, есть некоторый HTML-код).

Теперь при просмотре в браузере h1 отображается в самом верху #div, а поле 100px появляется поверх #div.

Может кто-нибудь предложить причину?

(Код слишком сложный для вставки соответствующих частей, поэтому, если никто не может дать мне ответ, я отправлю его и, возможно, кто-то обнаружит ошибку или что-то в этом роде.)

Ответы

Ответ 1

Попробуйте вместо этого добавить дополнение. Раньше я видел эту проблему. Если прокладка делает то же самое, попробуйте поместить контейнер div, но #div и h1 затем добавьте маржу. Если вы просто хотите переместить h1 вниз из #div, то отступы - ваш лучший выбор, так как он будет "Нажать h1 дальше в поле #div".

Ответ 2

Это не относится к тегу H1. Это то, что мы называем крахом.

Вы можете найти сообщение об этой теме здесь: http://reference.sitepoint.com/css/collapsingmargins

у вас есть несколько решений:

  • вместо этого используйте дополнение
  • добавить переполнение: auto в родительском div
  • добавить прозрачную верхнюю границу к родительскому div

Ответ 3

Я смог решить эту проблему, выполнив все теги заголовка (h1-h6) display: inline-block;. Как встроенные элементы с полями, они могут переполняться, как это, но как встроенные блоки, они ведут себя немного лучше с другими.