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
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
3Das 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.
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 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 [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!
