Lösen Sie das Problem „Rand: oberer Kollaps“ in CCS

Die HTML-Struktur ist wie folgt:

Die CCS-Struktur ist wie folgt:

Das Seiteneffektdiagramm sieht wie folgt aus:

Nun können wir sehen, dass im Child-Element zwar klar 50px nach rechts und 50px nach unten eingestellt sind, auf der Seite jedoch nur eine Verschiebung nach rechts und keine Verschiebung nach unten angezeigt wird.

Im Allgemeinen wird margin verwendet, um den äußeren Rand eines Elements festzulegen. Normalerweise sollte beim Festlegen margin Randwerts das übergeordnete Element relativ zum Browser und das untergeordnete Element relativ zum übergeordneten Element positioniert werden.

Rand oben: 50px, aber die Seite hat keinen Effekt, was bedeutet, dass der Rand zusammengebrochen ist.

Was also ist ein Margenkollaps?

Beim Setzen von margin-top: 50px; im Child ändert sich die Box darin nicht. Beim Setzen von margin-top: 150px ; für das Child-Element, das größer als die Höhe der Parent-Box ist, wird das Child-Element jedoch nicht mehr relativ zum Parent-Element positioniert, sondern wandert mit dem Parent-Element relativ zum Browser um 150px nach unten. Das bedeutet, dass der Rand einknickt. (Das Zusammenklappen der Ränder erfolgt, wenn das übergeordnete Element relativ zum Browser positioniert ist und das untergeordnete Element nicht relativ zum übergeordneten Element positioniert ist. Das untergeordnete Element ist sozusagen relativ zum übergeordneten Element zusammengeklappt.)

Wenn wir margin-top: 50px auf eine Höhe anpassen, die größer als das übergeordnete Element ist, wird das untergeordnete Element nicht mehr relativ zum übergeordneten Element positioniert, sondern wird mit dem übergeordneten Element relativ zum Browser um 150 Pixel nach unten verschoben.
Das Seiteneffektdiagramm sieht wie folgt aus:

Um das Margin-Collapse-Problem zu lösen, müssen wir das Konzept des BFC verwenden:

BFC steht für block format context . Das Element, das BFC auslöst, ändert einen kleinen Teil der Rendering-Regeln, wodurch einige schwierige CSS-Fehler behoben werden können.

Die Elemente, die BFC auslösen, sind:

Position: absolut;
Anzeige: Inline-Block;
schweben: links/rechts;
Überlauf: versteckt;

Die CSS-Struktur ist wie folgt:

Der Seiteneffekt ist wie folgt:

Jede der oben genannten Zeilen kann das Problem des Margeneinbruchs ausgleichen ~

Zusammenfassen

Dies ist das Ende dieses Artikels über „Margin: Top Collapse“ in CCS. Weitere relevante CCS-Inhalte zu „Margin: Top Collapse“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!