У элемента с полем для полей есть поле вне контейнера

Question

У меня есть кое-что для этого:

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

h1 {
   margin-top: 100px;
}

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

Теперь при просмотре в браузере h1 показывает всамый верх #div и поле 100px идет поверх #div.

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

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

Answer 1

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

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

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

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

Answer 2

Попробуйте вместо этого добавить отступы.Я видел такую ​​проблему раньше.Если заполнение делает то же самое, попробуйте поместить контейнер div, но #div и h1, затем добавьте поле.Если вы просто хотите сдвинуть h1 вниз с #div, то заполнение является вашей лучшей ставкой, так как оно «протолкнет h1 дальше в поле #div».

Answer 3

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