Zusammenfassung der häufig auftretenden Probleme bei der Verwendung von CSS Margin-Top

In CSS-Stilen legt das Attribut „margin-top“ den oberen Rand eines Elements fest. Es können negative Werte zugelassen werden. Der Standardwert für die Definition eines festen oberen Randes ist 0. Alle gängigen Browser unterstützen das margin-top-Attribut. In diesem Artikel werden wir speziell auf einige Probleme eingehen, die häufig bei der Verwendung des Attributs „margin-top“ auf Front-End-Seiten auftreten. Was soll ich tun, wenn sich die Einstellung auf das übergeordnete Element auswirkt? Was soll ich tun, wenn das Attribut „margin-top“ nicht funktioniert? usw.

1. Was soll ich tun, wenn die Einstellung „Rand oben“ Auswirkungen auf das übergeordnete Element hat?

1. So lösen Sie das Problem der Randfaltung, die sich auf das übergeordnete Element vom oberen Rand des untergeordneten Elements aus auswirkt

Prinzip: Randfaltung (Collapsing Margins)

Zwei oder mehr benachbarte Ränder (Margin) verschmelzen vertikal zu einem Marge.

Die Nachbarschaft bedeutet hier, dass es kein oberes und unteres Padding-Top, Padding-Bottom, Border-Top und Border-Bottom gibt und der Elementinhalt nicht leer ist.

Die häufigste Randfaltung ist, wenn

-Elemente nebeneinander angeordnet sind. Jedes p hat oben und unten einen Rand von 1em, benachbarte ps zeigen jedoch nur ein 1em-Intervall statt 2em an.

2. Warum wirkt sich der Rand oben von untergeordneten CSS-Elementen auf das übergeordnete Element aus? Es gibt viele Lösungen:
1) Überlauf hinzufügen: versteckt oder Polsterung, Rand zum übergeordneten Element

2) Polsterung anstelle von Rand verwenden

3

Das Hinzufügen von margin-top zu untergeordneten Elementen erhöht das Problem für das übergeordnete Element

margin-top von untergeordneten Elementen Es trennt das untergeordnete Element nicht vom übergeordneten Element, aber der Effekt entspricht dem Hinzufügen eines margin-top zum übergeordneten Element
Es gibt auch Lösungen, insbesondere:

1) Ändern Sie die Höhe des übergeordneten Elements und fügen Sie eine Simulation des Padding-Top-Stils hinzu (padding-top:1px;) 2) Fügen Sie overflow:hidden;

3) Float ( float: links; verfügbar, aber nicht empfohlen)

4) Rahmen zum übergeordneten Element hinzufügen (Rahmen: 1 Pixel durchgehend transparent)

5) Absolute Positionierung für das übergeordnete Element oder untergeordnete Element festlegen

6) Inhaltsgenerierung zum übergeordneten Element hinzufügen #father:before{content:' ';display:table};

2. Was soll ich tun, wenn das Attribut „margin-top“ nicht funktioniert?

1. Ursachen und Lösungen für Firefox-Margin-Top-Fehler

Der untere Rand eines schwebenden Elements auf Blockebene grenzt immer an den oberen Rand des schwebenden nächsten Geschwisterelements auf Blockebene, es sei denn, dieses Geschwisterelement verwendet a übersichtliche Bedienung.

Der obere Rand eines schwebenden Elements auf Blockebene grenzt an den oberen Rand seines ersten schwebenden untergeordneten Elements auf Blockebene (schwebendes erstes in Fluss befindliches untergeordnetes Element auf Blockebene) (wenn das Element keinen oberen Rand hat, kein padding-top und untergeordnete Elemente werden nicht gelöscht).

2.

margin-top schlägt fehl, CSS- + Div-Layout-CSS-Box-Modell-Randzusammenführungsproblem

in In regelmäßig Im Dokumentenfluss werden benachbarte vertikale Ränder von zwei oder mehr Boxmodellen auf Blockebene ausgeblendet. Die endgültige Berechnungsmethode für den Randwert ist wie folgt:

a. Wenn alle Werte positiv sind, nehmen Sie den größten Wert. b. Wenn nicht alle Werte positiv sind, nehmen Sie den maximalen Wert der positive Wert; c. Wenn es keinen positiven Wert gibt, nehmen Sie den absoluten Wert und subtrahieren Sie dann den Maximalwert von 0.

3. Mehrere Gründe, warum das CSS-Margin-Top-Attribut nicht funktioniert

Grund 1: Margin Merging Die Eigenschaft „margin-top“ ist ungültig.

Grund 2: Untergeordnete Elemente und übergeordnete Elemente können auch dazu führen, dass die festgelegten Ränder für untergeordnete Elemente fehlschlagen

Fragen und Antworten zum Margin-Top-Attribut

1 Fragen Sie mich nach der Margin-Top-Frage

2. Fügen Sie ein kleines Div in ein großes CSS-Div ein und legen Sie das Attribut „margin-top“ für das kleine Div fest. Es gibt auch Bilder

3 Warum wirkt sich die Einstellung „Rand oben“ auf untergeordnete Elemente auf das übergeordnete Element aus?

[Verwandte Empfehlungen]

1. Zusammenfassung der CSS-Margin-Attribute und -Nutzung

Das obige ist der detaillierte Inhalt vonZusammenfassung der häufig auftretenden Probleme bei der Verwendung von CSS Margin-Top. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!