Manchmal fallen zwei Ränder zu einem einzigen Rand zusammen.
Obere und untere Ränder von Elementen werden manchmal zu einem einzigen zusammengefasst Rand, der dem größten der beiden Ränder entspricht.
Am linken und rechten Rand passiert das nicht! Nur oberer und unterer Rand!
Schauen Sie sich das folgende Beispiel an:
Demonstration des Margenkollapses:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
Im obigen Beispiel hat das <h1>-Element einen unteren Rand von 50 Pixeln und das <h2> Der obere Rand des Elements ist auf 20 Pixel festgelegt.
Der gesunde Menschenverstand scheint darauf hinzuweisen, dass der vertikale Rand zwischen <h1> und das <h2> wäre insgesamt 70px (50px + 20px). Aber aufgrund des Margenverfalls Der tatsächliche Rand beträgt am Ende 50 Pixel.
Eine Abkürzungseigenschaft zum Festlegen aller Randeigenschaften in einer Deklaration
Legt den unteren Rand eines Elements fest
Legt den linken Rand eines Elements fest
Legt den rechten Rand eines Elements fest
Legt den oberen Rand eines Elements fest