webentwicklung-frage-antwort-db.com.de

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

Meine CSS-Margen verhalten sich nicht so, wie ich es von mir erwartet oder erwartet habe. Ich scheine, dass mein Kopf-Rand oben die div-Tags beeinflusst, die ihn umgeben.

Das ist, was ich will und erwarte:What I want....

... aber das ist es, was ich ende mit:What I get...

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 die Marge in diesem Beispiel übertrieben. Der Standardbranderrand für h1-Tag ist etwas kleiner, und in meinem Fall verwende ich Twitter Bootstrap, mit Normalizer.css, wodurch der Standardrand auf 10 Pixel gesetzt wird. Nicht so wichtig ist der Hauptpunkt: Ich kann, sollte nicht, will nicht den Rand des h1-Tags ändern.

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

Ich habe ein paar Threads über ähnliche Probleme gelesen, aber keine wirklichen Antworten und Lösungen gefunden. Ich weiß, dass das Hinzufügen von padding:1px; oder border:1px; das Problem löst. Das fügt jedoch nur neue Probleme hinzu, da ich weder eine Auffüllung noch einen Rand in meinen div-Tags haben möchte.

Es muss eine bessere Lösung geben? Das muss ziemlich üblich sein.

102
jamietelin

Fügen Sie overflow:auto zu Ihrem #page div hinzu.

jsFiddle-Beispiel

Und check out zusammenfallende Ränder , während Sie gerade dabei sind.

165
j08691

Fügen Sie eine der folgenden Regeln hinzu:

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

Dies wird durch collapsing margins verursacht. Siehe dazu einen Artikel hier .

Nach dem Artikel:

Die W3C-Spezifikation definiert kollabierende Ränder wie folgt:

„In dieser Spezifikation bedeutet der Ausdruck kollabierende Ränder, dass benachbarte Ränder (kein nicht leerer Inhalt, Auffüllen oder Randbereiche oder Abstand zwischen diesen Bereichen) von zwei oder mehr Kästchen (die nebeneinander liegen oder verschachtelt sein können) sich zusammenschließen eine Marge. "

Dies gilt auch für Parent-Child-Elemente.

Alle Antworten enthalten eine der möglichen Lösungen:

Es gibt andere Situationen, in denen die Ränder von Elementen nicht reduziert werden:

  • schwebende Elemente
  • absolut positionierte Elemente
  • inline-Block-Elemente
  • elemente mit Überlauf auf etwas anderes als sichtbar gesetzt (Sie schließen die Ränder nicht mit ihren untergeordneten Elementen ab.)
  • gelöschte Elemente (Sie reduzieren ihre oberen Ränder nicht mit dem unteren Rand des übergeordneten Blocks.)
  • das Wurzelelement
31
Ziarno

Problem war, dass die Eltern die Kinder nicht für die Körpergröße berücksichtigen. Das Hinzufügen von display:inline-block; hat es für mich getan.

Full CSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

Siehe Fiddle

13
jonBreizh

Die Lösungen in den anderen Antworten haben für mich nicht funktioniert. Transparente Rahmen, Inline-Blöcke usw. führten zu anderen Problemen. Stattdessen fügte ich meinem Vorfahrenelement folgende CSS hinzu:

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

Abhängig von Ihrer Situation kann dies zu eigenen Problemen führen, da nach dem letzten untergeordneten Element zusätzlicher Speicherplatz hinzugefügt wird.

0
Trevor

Fügen Sie einfach border-top: 1px solid transparent; zu Ihrem #page-Element hinzu.

0
Amid