Este problema está acontecendo para mim no IE8 e Chrome, o que me faz pensar que isso é uma coisa de padrões.

Estou criando um site com cabeçalho e menu usando DIVs que não têm conteúdo, mas têm imagens de plano de fundo e alturas / larguras definidas em CSS. Eu quero que o DIV interno tenha margem contra o div pai, mas ele aplica a margem ao div pai. Colocar conteúdo dentro do divs corrige isso. O IE7 não tem esse problema. Eu não quero usar  porque joga fora e parece um hack.

Por favor, veja o código de exemplo para recriar abaixo:

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

Se você der ao conteúdo div pai ou até mesmo uma borda, o layout funcionará corretamente. Eu acertei o mesmo problema algumas vezes neste site. Eu queria dar um top de margem para uma lista de itens de menu, mas como o headerMenu div (seu pai) também não tem nenhum conteúdo que borbulha a propriedade.

O que está acontecendo?