CSS Margin Terror; Rand fügt Platz außerhalb des übergeordneten Elements hinzu

Question

Nov 26, 2012, 10:44 PM

CSS Margin Terror; Rand fügt Platz außerhalb des übergeordneten Elements hinzu

Meine CSS-Ränder verhalten sich nicht so, wie ich es will oder erwarte. Ich scheine, als ob meine Kopfzeile oben die Div-Tags beeinflusst, die sie umgeben.

Das will und erwarte ich:

... aber das ist es, womit ich ende:

Quelle:

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

Ich habe den Spielraum in diesem Beispiel übertrieben. Der Standardbrowserrand für h1-tag ist etwas kleiner, und in meinem Fall verwende ichTwitter Bootstrap mit Normalizer.css Hiermit wird der Standardabstand auf 10 Pixel festgelegt. Nicht so wichtig, Hauptsache ist; Ich kann nicht, soll nichtwollen nicht Ändern Sie den Rand des h1-Tags.

Ich denke, es ist meiner anderen Frage ähnlich;Warum funktioniert dieser CSS-Randstil nicht?. Die Frage ist, wie ich dieses spezielle Problem lösen kann.

ich habe gelesenein paar fäden auf ähnliche Probleme, aber keine wirklichen Antworten und Lösungen gefunden. Ich weiß es hinzuzufügenpadding:1px; oderborder:1px; löst das Problem. Das fügt aber nur neue Probleme hinzu, da ich weder ein Auffüllen noch einen Rand auf meinen Div-Tags haben möchte.

Es muss eine bessere, bewährte Lösung geben? Das muss ziemlich häufig sein.