Heim > Artikel > Web-Frontend > Warum margin-top nicht auf übergeordnete Elemente wirkt

Warum margin-top nicht auf übergeordnete Elemente wirkt

巴扎黑Original: 2017-06-28 13:44:041685Durchsuche

Warum margin-top nicht auf das übergeordnete Element wirkt:
Vorschlag: Schreiben Sie den Code so weit wie möglich handschriftlich, was eine effektive Verbesserung bewirken kann die Effizienz und Tiefe des Lernens.
Was die grundlegende Verwendung des Attributs „margin-top“ betrifft, ist es sehr einfach, den oberen Rand eines Objekts festzulegen:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> * 
{ 
  margin:0px; 
  padding:0px; 
} p 
{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
  <p></p> 
</body> 
</html>

Der obige Code kann den oberen Rand von festlegen p auf 50px, alles funktioniert gut, es gibt kein Problem, schauen wir uns den nächsten Code an:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #parent 
{ 
  width:200px; 
  height:200px; 
  background-color:red; 
} #children 
{ 
  width:60px; 
  height:60px; 
  background-color:green; 
  margin:0px auto; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
<p id="parent"> 
  <p id="children"></p> 
</p> 
</body> 
</html>

Die ursprüngliche Absicht des obigen Codes besteht darin, die Oberseite des untergeordneten Elements 50 Pixel vom übergeordneten Element entfernt zu machen, aber tatsächlich wurde dadurch nicht der erwartete Effekt erzielt. Stattdessen befand sich die Oberseite des untergeordneten Elements nahe am übergeordneten Element, und der Rand oben schien dies zu tun auf das übergeordnete Element übertragen werden, sodass das übergeordnete Element einen oberen Rand erzeugen kann. Dies ist eigentlich ein typisches Randzusammenführungsproblem, aber nicht alle Browser werden dieses Phänomen hervorrufen. Im Allgemeinen tritt dieses Phänomen bei Standardbrowsern auf, und IE6 und IE7 haben in diesem Zustand keine Randzusammenführung. Bedingungen für das Zusammenführen des oberen Rands:
1. Es gibt keine Grenze zwischen dem oberen Rand des übergeordneten Elements und dem oberen Rand des untergeordneten Elements.
2.Zwischen dem oberen Rand des übergeordneten Elements und dem oberen Rand des untergeordneten Elements befindet sich kein nicht leerer Inhalt.
3.Es gibt keinen Abstand zwischen dem oberen Rand des übergeordneten Elements und dem oberen Rand des untergeordneten Elements.
3. Im übergeordneten Element sind keine Positionierungsattribute (außer statisch und relativ), Überlauf (außer sichtbar) und Anzeige:inline-block usw. festgelegt und untergeordnetes Element.
4. Weder das übergeordnete Element noch die Ressource sind schwebend.
Hinweis: Die oben genannten Bedingungen müssen erfüllt sein. Dann ist die Lösung dieser Situation auch sehr einfach: Zerstören Sie einfach eine der oben genannten Situationen.
Weitere Informationen zum Margin-Merging finden Sie im Kapitel Detaillierte Erläuterung des Margin-Merging.

Das obige ist der detaillierte Inhalt vonWarum margin-top nicht auf übergeordnete Elemente wirkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Rand-Oberseiten-Problem zwischen übergeordnetem Element und untergeordnetem ElementNächster Artikel：Rand-Oberseiten-Problem zwischen übergeordnetem Element und untergeordnetem Element

In Verbindung stehende Artikel

Mehr sehen