margin-Top in einem verschachtelten Div

Ich bekomme die Lösung mit Überlauf: auto im übergeordneten div.

So funktionieren die Ränder. Der Rand ist der Abstand zwischen dem nächsten Element mit einem Rand/Polsterung/ähnlichem. Es ist nicht unbedingt als übergeordnetes Element definiert. Wenden Sie sich an die Spezifikation .

Hier sind einige Dinge, die Sie als Problemumgehung tun können

Verwenden Sie stattdessen Auffüllen

Dies bedeutet nur, anstelle von margin-top: 10px; verwenden Sie padding-top: 10px;. Dies ist nicht für jeden Anlass geeignet.

Seltsamer Hack, den ich entdeckt habe

Ich bezweifle, dass ich das zunächst entdeckt habe, aber vor ein paar Tagen habe ich das Problem so gelöst. Ich hatte einen <div id="header" />, den ich auch einen oberen Rand geben wollte, und sein oberer Rand drückte das übergeordnete Element (body-Element) ebenfalls nach unten. Also habe ich dies mit dem body-Element gemacht ...

body {
    padding-top: 1px;
    margin-top: -1px;
}

Das hat meine Marge zum Laufen gebracht. Sie können auch versuchen, einen Rand wie border: 1px solid #ccc zu verwenden.

Es wäre auch ratsam, eine Anmerkung in den CSS-Kommentaren zu hinterlassen, um zu erklären, warum Sie dieses besondere Regelpaar haben. Ich habe gerade /* this is to stop collapsing margins */ hinzugefügt.

Lesen Sie weiter

Schauen Sie sich diese andereFragen über Stack Overflow an

Der Grund für den Überlauf: Das übergeordnete div wird automatisch so geändert, dass der verschachtelte Rand oben ist, dass einen neuen Formatierungskontext erstellt. Jedes Div, das absolut, fest, verschoben oder mit einem anderen Überlauf als sichtbar positioniert ist, erstellt einen neuen Formatierungskontext. Das übergeordnete div wird dann zum Stamm dieses neuen Formatierungskontexts, und reduzierende Ränder gelten nicht für Stammelemente.

Ausführlicher:

Formatierungskontexte können entweder Inline oder Block sein, und nur die Blockformatierungskontexte reduzieren ihre Ränder. Diese Formatierungskontexte bilden den Fluss des Dokuments.

Ein Blockformatierungskontext besteht einfach aus allen Elementen auf Blockebene (z. B. divs, p, table), die vertikal in einem übergeordneten Block nacheinander bis zum Ende des Dokuments/Containers oder bis zum Erstellen eines neuen Formatierungskontexts angeordnet sind.

Im Falle der Verschachtelung kollabiert der obere Rand des untergeordneten Objekts mit dem oberen Rand des übergeordneten Elements, da beide Divs Teil eines Blockformatierungskontexts sind. Wenn Sie overflow auf auto setzen, wird das übergeordnete div zum Container des neuen Formatierungskontexts und das untergeordnete Element zum ersten Blockelement. Somit sind die beiden Ränder nicht mehr "benachbart", da das übergeordnete div jetzt der Stamm ist.

Hoffentlich hilft das.

Box-Modell: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Visuelles Formatierungsmodell: http://www.w3.org/TR/CSS2/visuren.html#normal-flow

"Einsturzränder" ist Ihr Problem. Hier können Sie verstehen, was ist und warum es noch lebt: http://www.sitepoint.com/web-foundations/collapsing-margins/

Ich las im Internet nach einer anständigen Lösung und fand schließlich diesen Artikel: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Kurz gesagt, Sie haben eine Reihe von Methoden, um Ihr Problem zu lösen:

1) Grenze im übergeordneten Div (könnte transparent sein)

2) Auffüllen im übergeordneten div

3) Überlauf: auto

4) schwimmer: links

Sie sollten dem Link folgen, da er alle Lösungen ausführlich erläutert.

Sie können auch position property für inner div verwenden, um dies zu beheben. mögen:

position:fixed;