Свойства CSS, передаваемые родительскому элементу, когда DIV пуст

Question

Эта проблема возникает для меня в IE8 и Chrome, что заставляет меня думать, что это стандарт.

Я создаю сайт с заголовком и меню, используя DIV, которые не имеют никакого контента, но имеют фоновые изображения и высоты / ширины, установленные в CSS. Я хочу, чтобы внутренний DIV имел маржу против родительского div, но он применяет маржу к родительскому div. Помещение контента в div исправляет это. IE7 не имеет этой проблемы. Я не хочу использовать  , потому что он выбрасывает вещи и выглядит как хак.

См. Пример кода для воссоздания ниже:

<style>

#header{
    width:600px;
    height:300px;
    background-color:red;
}

#headerMenu{
    height:100px;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    margin-top:20px;
}

</style>

<div id="header">
    <div id="headerMenu">
    </div>
</div>

Если вы предоставляете родительское содержимое div или даже границу, макет работает правильно. Я сталкивался с этой же проблемой несколько раз на этом сайте. Я хотел добавить на верхний край списка пунктов меню, но так как div headerMenu (его родитель) также не имеет никакого содержимого, оно всплывает из свойства.

Что происходит?

Answer 1

Я думаю, что вы наберете разрыв полей .

Дополнительную информацию см. В спецификации CSS 2.1 о сворачивании полей .

Answer 2

Да, это стандарт. Это называется свертыванием полей, и причина того, что вы не видите его в IE7, наиболее вероятна, потому что IE7 ошибается.

Поля немного сложны, так как они не определяют область вокруг элемента, а минимальное расстояние между элементами. Свертывание полей происходит, когда дочерний элемент имеет поле, а родительский элемент не имеет отступов или границ. Поле применяется между дочерним элементом и окружающими элементами, а не между дочерним элементом и родительским элементом.

Поскольку некоторые браузеры (из известных мне только IE) не справляются с коллапсами правильно, вам следует избегать их пока. Вместо этого используйте отступы, если это возможно, или установите отступ или границу для родителя, чтобы избежать сужения полей.

Answer 3

Попробуйте добавить overflow: auto к коду #header css.

Например,

#header{
    width:600px;
    height:300px;
    background-color:red;
    overflow: auto;
}

РЕДАКТИРОВАТЬ: Похоже, position: absolute работает также.

Answer 4

У меня тоже была эта проблема и я добавил ее в css

border: 0px solid;