Terror de margem CSS; Margem adiciona espaço fora do elemento pai

Question

Nov 26, 2012, 10:44 PM

Terror de margem CSS; Margem adiciona espaço fora do elemento pai

Minhas margens de CSS não se comportam da maneira que eu quero ou espero que elas aconteçam. Parece que meu topo de margem de cabeçalho afeta as tags div que o cercam.

Isso é o que eu quero e espero:

... mas é com isso que acabo:

Fonte:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

Eu exagerei a margem neste exemplo. A margem padrão do navegador na tag h1 é um pouco menor, e no meu caso eu usoTwitter Bootstrap, com Normalizer.css que define a margem padrão para 10px. Não é tão importante, o ponto principal é; Eu não posso, não devonão quero altere a margem na tag h1.

Eu acho que é semelhante à minha outra pergunta;Por que esse estilo de margem de CSS não funciona?. Pergunta é como eu resolvo este problema específico?

eu lialguns tópicos em problemas semelhantes, mas não encontrei respostas e soluções reais. Eu sei adicionarpadding:1px; ouborder:1px; resolve o problema. Mas isso só adiciona novos problemas, já que eu não quero um preenchimento nem uma borda nas minhas div-tags.

Deve haver uma solução melhor e melhor prática? Isso deve ser bem comum.