Warum fügt margin Platz außerhalb des übergeordneten Elements hinzu? [duplicate]
Lesezeit: 5 Minuten
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.
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
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.
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
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.
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.
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:
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