Warum funktioniert dieser CSS-margin-top-Stil nicht funktioniert?
Ich versuche, um die margin-Werte auf ein div in ein weiteres div. Alles funktioniert einwandfrei außer die top-Werte, so scheint es, ignoriert zu werden. Aber warum?
, Was ich erwartet habe:
, Was ich bekommen:
Code:
CSS:
#outer {
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto 0 auto;
display: block;
}
#inner {
background: #FFCC33;
margin: 50px 50px 50px 50px;
padding: 10px;
display: block;
}
HTML:
<div id="outer">
<div id="inner">
Hello world!
</div>
</div>
W3Schools habe keine Erklärung, warum die Marge auf diese Weise Verhalten.
- haben Sie versucht, die schwebenden, die innere?
- hum.. Mit
float:left;
es funktioniert... aber warum ist dies nötig. Ich will es nicht zu schweben. Und warum ist der Rand für Links/rechts arbeiten? - Willkommen in der lustigen Welt der CSS-margin-collapse-Algorithmus!
- W3Schools vs. W3CDocs... ich denke, wir haben einen Gewinner. 😀
- Set
overflow: hidden
auf Ihren Behältern, und Sie verriegelt sich in den Margen Ihrer Nachkommen. - jsFiddle es, zu retten, dem nächsten Kerl, den 25 Sekunden jsfiddle.net/kLeu9
- Nichts für mich gearbeitet.
- Du weißt gar nichts, Jon Schnee..
- Ich kann mich nicht erinnern, Wann CSS ging so kompliziert. Die nur für die Anzeige-Elemente und ich sehe viele ppl mit ihm zu kämpfen. Es fühlt sich nicht wie Sie es lernen, Sie zu "studieren" können.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Seht Ihr eigentlich den oberen Rand des
#inner
element Zusammenbruch in der oberen Kante der#outer
element, so dass nur die#outer
Rand intakt (wenn auch nicht in Bildern). Die oberen Kanten der beiden Kästen sind bündig gegeneinander, weil Ihre Margen gleich sind.Hier sind die relevanten Punkte aus der W3C-spec:
Der Grund, warum Sie einen der folgenden Schritte verhindert, dass der Rand vom Kollaps:
div
Elementediv
Elemente inline-blocksoverflow
von#outer
aufauto
(oder ein beliebiger anderer Wert alsvisible
)Ist da:
Die linken und rechten Seitenränder Verhalten, als Sie erwarten, weil:
border-top/bottom:1px solid transparent (or whatever your bg color)
ist ein weiterer Favorit im Kampf mit diesem 😎Versuchen Sie es mit
display: inline-block;
auf die inneren div.display:inline-block;
. Auch wieder bei der Verwendung vondisplay:inline-block;
ist, verlieren Sie die Breite von 100% auf die div.Was @BoltClock erwähnt werden, sind ziemlich solide.
Und Hier möchte ich nur hinzufügen, mehrere Lösungen für dieses problem.
überprüfen Sie diese w3c_collapsing Marge. Die grünen Teile sind die möglichen Gedanken, wie dieses problem gelöst werden kann.
Lösung 1
dass heißt ich kann hinzufügen
float:left
entweder#outer
oder#inner
demo1.beachten Sie auch, dass
float
ungültig machen würden dieauto
im Rand.Lösung 2
andere als
visible
lassenoverflow: hidden
in#outer
. Und dieser Weg scheint ziemlich einfach und anständig. Ich mag es.Lösung 3
oder
diese beiden Methoden brechen den normalen Ablauf des
div
Lösung 4
ist das gleiche wie @enderskill
Lösung 5
Dieser hat nicht viel Arbeit mit der Frage zu tun, da es die einstürzenden Marge zwischen Geschwistern. es bedeutet in der Regel, wenn eine top-box hat
margin-bottom: 30px
- und eine Geschwister-box hatmargin-top: 10px
. Die gesamte Marge zwischen Ihnen ist30px
statt40px
.Lösung 6
Dies ist sehr interessant und ich kann nur hinzufügen einer oberen Grenze
Und Auch
<div>
block-Ebene in Verzug, so dass Sie nicht haben, zu erklären, es auf Zweck. Sorry für nicht in der Lage, mehr als 2 links und Bilder, aufgrund meiner Anfänger-Ruf. Zumindest wissen Sie, wo das problem kommt ab dem nächsten mal, wenn Sie sehen, etwas ähnliches.Nicht sicher, warum, was haben Sie nicht funktioniert, aber Sie können hinzufügen
overflow: auto;
dem äußeren div.
Nicht genau warum, aber die änderung der inneren CSS
scheint zu funktionieren;
Wenn Sie hinzufügen, keine Polsterung, um
#outer
es funktioniert.Demo
Nicht zu beantworten, das "warum" (hat etwas w/Zuklappen-Marge), aber scheint, wie die einfachste/logischste Weg, das zu tun, was Sie versuchen zu tun wäre, um nur hinzufügen
padding-top
zu den äußeren div -:http://jsfiddle.net/hpU5d/1/
Kleine Anmerkung, es sollte nicht notwendig sein, ein div zu
display:block;
es sei denn, es ist etwas anderes in deinem code sagen, es nicht zu blockieren.versuchen Sie dies:
http://jsfiddle.net/7AXTf/
Glück
Ich denke, die Einstellung der position Eigenschaft des #innere div relative kann auch helfen, erreichen die Wirkung. Aber trotzdem habe ich versucht, den ursprünglichen code eingefügt in die Frage auf IE9 und den neuesten Google Chrome, und Sie geben schon den wünschenswerten Effekt, ohne irgendwelche änderungen.
Verwenden
padding-top:50px
zum äußeren div. So etwas wie dieses:Hinweis: Polsterung erhöht die Größe der div. Wenn In diesem Fall die Größe des div ist wichtig, wenn ich meine es muss eine bestimmte Höhe. verringern Sie die Höhe von 50px.:
Haben Sie versucht !wichtig ist vor allem, es wird alles erzwingen:
Nur für eine schnelle beheben, versuchen Sie, wickeln Sie Ihr Kind-Elemente in einem
div
element wie das -Marge von
inner
div wird nicht zusammenbrechen, durch die Polsterung der1px
zwischenouter
undinner
div. So logisch Sie haben1px
extra Raum zusammen mit vorhandenen Marge voninner
div.