Terror na marginesie CSS; Margines dodaje miejsce poza elementem nadrzędnym

Question

Nov 26, 2012, 10:44 PM

Terror na marginesie CSS; Margines dodaje miejsce poza elementem nadrzędnym

Moje marginesy css nie zachowują się tak, jak chcę lub oczekuję ich. Wygląda na to, że mój nagłówek marginesu ma wpływ na otaczające go znaczniki div.

Tego właśnie chcę i oczekuję:

... ale to właśnie kończę:

Źródło:

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

W tym przykładzie przesadziłem margines. Domyślny margines przeglądarki na tagu h1 jest nieco mniejszy, aw moim przypadku używamTwitter Bootstrap, z Normalizer.css który ustawia margines domyślny na 10px. Nie tak ważne, główny punkt; Nie mogę, nie powinienemnie chcieć zmień margines znacznika h1.

Myślę, że jest to podobne do mojego innego pytania;Dlaczego ten styl marginesu CSS nie działa?. Pytanie brzmi: jak rozwiązać ten konkretny problem?

przeczytałemkilka wątków na podobne problemy, ale nie znalazłem żadnych prawdziwych odpowiedzi i rozwiązań. Wiem dodawaniepadding:1px; lubborder:1px; rozwiązuje problem. Ale to tylko dodaje nowe problemy, ponieważ nie chcę dopełnienia ani obramowania na moich znacznikach div.

Musi istnieć lepsze, najlepsze rozwiązanie, rozwiązanie? To musi być dość powszechne.