Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Problembeschreibung

Als ich heute den Seitenstil änderte, stieß ich auf eine Situation, in der ich bei einem untergeordneten Element margin-top einstellte, aber dadurch keine Lücke zwischen dem untergeordneten und dem übergeordneten Element entstand. Stattdessen wirkte es auf das übergeordnete Element und verursachte bei diesem einen margin-top .

Heute werde ich über die Ursache des gesamten Problems und die Lösung sprechen.

Problemanalyse

Auf MDN gibt es folgenden Text:

Der obere Rand ( margin-top ) und margin-bottom bottom ) eines Blocks werden manchmal zu einem einzigen Rand kombiniert (kollabiert), dessen Größe der maximalen Größe der einzelnen Ränder entspricht. Dieses Verhalten wird als邊距折疊bezeichnet. Hinweis: Es werden nur die oberen und unteren Ränder reduziert, nicht die linken und rechten Ränder.

Es gibt drei Situationen, in denen es zu einem Margeneinbruch kommt:

1. Zwischen benachbarten Elementen auf derselben Ebene

<div Klasse="A">Element A</div>
<div class="B">Element B</div>

<Stil>
.A,
.B {
  Breite: 50px;
  Höhe: 50px;
}
.A {
  Hintergrund: gelb;
  Rand unten: 10px;
}
.B {
  Hintergrund: rosa;
  Rand oben: 20px;
}
</Stil>

Der Abstand zwischen den beiden p-Tags oben beträgt 20px.

Lösung:

Das zweite Element B setzt Clearfix

.clearfix::nach {
    Inhalt: "";
    Anzeige: Block;
    klar: beides;
    Höhe: 0;
    Überlauf: versteckt;
    Sichtbarkeit: versteckt;
}

.klarfix {
    Zoom: 1;
}

2. Es gibt keinen Inhalt zwischen übergeordneten und untergeordneten Elementen

In diesem Beispiel gibt es keine weiteren Elemente zwischen den Elementen A und B und der übergeordneten Elementbox:

<div Klasse="Box">
    <div Klasse="A">Element A</div>
    <div class="B">Element B</div>
</div>
<div class="next">Weiter</div>

<Stil>
.Kasten {
  Rand oben: 10px;
  Rand unten: 10px;
  Hintergrund: #eee;
}
.A,
.B {
  Breite: 50px;
  Höhe: 50px;
}
.A {
  Hintergrund: gelb;
  Rand oben: 20px;
}
.B {
  Hintergrund: rosa;
  Rand unten: 20px;
}
.nächste {
  Höhe: 50px;
  Hintergrund: #eee;
}
</Stil> 

Lösung:

• Das übergeordnete Element erstellt einen Formatierungskontext auf Blockebene ( overflow:hidden ).
• Das übergeordnete Element legt die oberen und unteren Ränder fest ( border: 1px solid transparent )
• Das übergeordnete Element legt die obere und untere Polsterung fest ( padding: 1px 0 )
• Die Anordnung der Unterelemente erfolgt durch float oder position .

Hinweis: Auch wenn Sie den Rand des übergeordneten Elements auf 0 ( margin: 0 setzen, werden die Ränder des ersten oder letzten untergeordneten Elements immer noch über das übergeordnete Element hinaus „überlaufen“.

3. Leere Blockelemente

Wenn margin-top von Element B direkt mit margin-bottom von Element A verbunden ist ( das heißt, das mittlere Element enthält keinen Inhalt ), kommt es ebenfalls zu einem Randkollaps.

<div class="top">oben</div>
<div Klasse="Mitte"></div>
<div class="bottom">unten</div>

<Stil>
.oben,.unten {
  Breite: 50px;
  Höhe: 50px;
  Hintergrund: rosa;
}
.Mitte {
  Rand oben: 10px;
  Rand unten: 20px;
}
</Stil> 

Lösung:

• mittleres Element löscht Float: Clearfix
• Das mittlere Element erstellt einen Formatierungskontext auf Blockebene: overflow: hidden
• Das mittlere Element wird auf ein Inline-Blockelement gesetzt: display: inline-block;
• Legen Sie die Höhe des mittleren Elements fest: Höhe: 1px;
• Legen Sie die Mindesthöhe des mittleren Elements fest: min-height: 1px;
• Legen Sie den Rahmen für das mittlere Element fest: border-top: 1px solid transparent;
• Legen Sie die Polsterung für das mittlere Element fest: padding-top: 1px;

Vorsichtsmaßnahmen

• Wenn der beim Falten beteiligte Rand negative Werte enthält, ist der Wert des gefalteten Rands die Summe des größten positiven Rands und des kleinsten negativen Rands (dh des negativen Rands mit dem größten absoluten Wert). Das heißt, wenn -10px, 10px und 30px übereinander gestapelt werden, beträgt der Randbereich 30px-10px = 20px.
• Wenn alle an der Faltung beteiligten Ränder negativ sind, ist der Wert des gefalteten Rands der Wert des kleinsten negativen Rands. Diese Regel gilt für benachbarte und verschachtelte Elemente.

Referenzlink https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass der obere Rand des untergeordneten Elements eine Bewegung des übergeordneten Elements verursacht. Weitere Informationen dazu, wie der obere Rand des untergeordneten Elements eine Bewegung des übergeordneten Elements verursacht, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!