Warum fügt margin Platz außerhalb des übergeordneten Elements hinzu? [duplicate]

Lesezeit: 5 Minuten

Benutzer-Avatar
jamietelin

Meine CSS-Ränder verhalten sich nicht so, wie ich es möchte oder erwarte. Ich habe den Eindruck, dass mein Header margin-top die ihn umgebenden div-tags beeinflusst.

Das will und erwarte ich:
Was ich will....

… aber das ist, was ich am Ende habe:
Was ich bekomme...

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 standardmäßige Browserrand für das h1-Tag ist etwas kleiner, und in meinem Fall verwende ich Twitter Bootstrap mit Normalizer.css Dadurch wird der Standardrand auf 10 Pixel festgelegt. Nicht so wichtig, Hauptpunkt ist; Ich kann nicht, soll nicht, wollen nicht Ändern Sie den Rand des h1-Tags.

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

Ich habe ein paar Threads zu ähnlichen Problemen gelesen, aber keine wirklichen Antworten und Lösungen gefunden. Ich weiß, hinzufügen padding:1px; oder border:1px; löst das Problem. Aber das fügt nur neue Probleme hinzu, da ich weder ein Padding noch einen Rahmen an meinen div-Tags haben möchte.

Es muss doch eine bessere Best-Practice-Lösung geben? Das muss ziemlich verbreitet sein.

  • Hast du mit einem CSS-Reset begonnen?

    – Diodeus – James MacFarlane

    26. November 2012 um 21:46 Uhr

  • Ich verwende Normalizer.css. Aber darum geht es nicht. Wenn ich das h1-Tag entferne. Es gibt kein Problem. Das Problem ist, dass ich einen Rand auf meinem h1-Tag haben möchte und das sich auf die umgebenden Elemente auswirkt.

    – Jamielin

    26. November 2012 um 21:48 Uhr

  • @DavidThomas Ich spiele gerade mit einer Demo, falls du rumfummeln willst jsfiddle.net/5RhFq/6

    – Kalvin

    26. November 2012 um 21:55 Uhr

  • egal.. j08691 hat es gelöst 🙂 jsfiddle.net/5RhFq/7

    – Kalvin

    26. November 2012 um 21:56 Uhr

  • Die Erklärung und einige mögliche Lösungen wurden bereits in meiner Antwort auf Ihre vorherige Frage behandelt …

    – BoltClock

    28. November 2012 um 6:16 Uhr

Addieren overflow:auto zu deinem #page div.

jsFiddle-Beispiel

Und auschecken zusammenbrechende Margen wenn du schon dabei bist.

  • Das funktioniert. Hier finden Sie jede Menge Beispiele ( seifi.org/css/… ) sowie einige gute Erklärungen. Keine Lösung ist wirklich 100% befriedigend. Aber ich denke, man muss damit leben, der Rand muss so funktionieren, sonst wäre die Textformatierung unmöglich. 99% der Zeit funktioniert es wie gewünscht. Aber hin und wieder kommt das Problem bei der Gestaltung eines Layouts. 😛

    – Jamielin

    26. November 2012 um 22:38 Uhr

  • Überlauf versteckt; funktionierte auch für mich und funktionierte besser für mich in meinem Szenario.

    – stujam

    21. Dezember 2014 um 15:24 Uhr

  • Du bist ein Zauberer. Das war wirklich ein seltsames Verhalten

    – glücklich

    6. Dezember 2018 um 16:33 Uhr

  • Kollabierende Ränder scheinen unglaublich kompliziert zu definieren (viele Regeln, viele Ausnahmen), was nützt es?

    – estani

    26. November 2019 um 11:29 Uhr

  • display: flex mit flex-direction: column auf dem übergeordneten Container macht den gleichen Trick.

    – Maksim Shamihulau

    6. Dezember 2020 um 7:32 Uhr

Benutzer-Avatar
Ziarno

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 verursacht durch collapsing margins. Siehe einen Artikel über dieses Verhalten Hier.

Nach dem Artikel:

Die W3C-Spezifikation definiert Collapsing Margins wie folgt:

„In dieser Spezifikation bedeutet der Ausdruck zusammenfallende Ränder, dass sich benachbarte Ränder (keine nicht leeren Inhalte, Polsterungen oder Randbereiche oder Freiräume trennen sie) von zwei oder mehr Kästen (die nebeneinander oder verschachtelt sein können) zu einer Form zusammenfügen eine einzige Marge.“

Dies gilt auch für Eltern-Kind-Elemente.

Alle Antworten beinhalten 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, deren Überlauf auf etwas anderes als sichtbar eingestellt ist (Sie reduzieren keine Ränder mit ihren Kindern.)
  • gelöschte Elemente (Sie klappen ihre oberen Ränder nicht mit dem unteren Rand ihres übergeordneten Blocks zusammen.)
  • das Wurzelelement

  • clear: <any option> scheint nicht zu funktionieren, die anderen Lösungen funktionieren auf Google Chrome

    – Ferrybig

    22. Januar 2019 um 12:54 Uhr

Benutzer-Avatar
jonBreizh

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

Volles CSS

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

Siehe Geige

Benutzer-Avatar
Inmitten

Einfach hinzufügen border-top: 1px solid transparent; zu deinem #page Element.

Von w3.org

Zwei Ränder grenzen genau dann aneinander, wenn:
– Keine Linienboxen, kein Freiraum, keine Polsterung und kein Rand trennen sie

Fügen Sie die folgende Regel hinzu:

overflow: hidden;

Dies wird durch kollabierende Margen verursacht. Siehe einen Artikel über dieses Verhalten Hier.

Nach dem Artikel:

Wenn ein übergeordnetes Element keine obere Auffüllung oder einen geringeren oberen Rand als sein erstes untergeordnetes Element hat, werden die Elemente so gerendert, dass das übergeordnete Element den Rand des untergeordneten Elements zu haben scheint. Dies kann also überall auf einer Seite passieren, wo diese Bedingungen erfüllt sind, aber es ist in der Regel am oberen Rand einer Seite am offensichtlichsten.

Benutzer-Avatar
Trevor

Die Lösungen in den anderen Antworten haben bei mir nicht funktioniert. Transparente Ränder, Inline-Block usw. verursachten alle andere Probleme. Stattdessen habe ich meinem Ancestor-Element das folgende CSS hinzugefügt:

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 Platz hinzugefügt wird.

Benutzer-Avatar
Romil Jain

#page {
overflow: hidden;
margin:0;
background:#FF9;
}

1005510cookie-checkWarum fügt margin Platz außerhalb des übergeordneten Elements hinzu? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy