Ten problem występuje dla mnie w IE8 i Chrome, co sprawia, że ​​myślę, że jest to standard.

Tworzę witrynę z nagłówkiem i menu przy użyciu DIV, które nie mają żadnej zawartości, ale mają obrazy tła i wysokości / szerokości ustawione w CSS. Chcę, aby wewnętrzny DIV miał margines przeciwko rodzicowi div, ale stosuje margines do rodzica div. Umieszczenie treści w div poprawia to. IE7 nie ma tego problemu. Nie chcę używać  bo to wyrzuca rzeczy i wygląda na hack.

Zobacz przykładowy kod do odtworzenia poniżej:

<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>

Jeśli nadasz rodzicowi zawartość div lub obramowanie, układ działa poprawnie. Na tej stronie kilka razy trafiłem na ten sam problem. Chciałem dać margines do listy pozycji menu, ale jako div headerMenu (jego rodzic) również nie ma żadnej zawartości, którą przenosi do właściwości.

Co się dzieje?