So lösen Sie das Problem des Randkollapses in CSS

Betrachten wir zunächst drei Situationen, in denen es zu einem Margeneinbruch kommt:

1. Wenn zwei benachbarte Elemente auf Blockebene aufeinandertreffen und das obere Element einen unteren Rand von margin-bottom und das untere Element einen oberen Rand von margin-top hat, dann nimmt der vertikale Abstand zwischen ihnen den größeren der beiden Werte an.

<Stil>
  .box1 {
     Breite: 150px;
     Höhe: 100px;
     Rand unten: 20px;
     Hintergrundfarbe: rgb(201, 239, 98);
  }
  .box2 {
     Breite: 100px;
     Höhe: 100px;
     Hintergrundfarbe: Rebeccapurple;
     Rand oben: 10px;
  }
</Stil>
   <div Klasse="Box1"></div>
   <div Klasse="box2"></div>

Zu diesem Zeitpunkt beträgt der vertikale Abstand zwischen den beiden Boxen nicht 30px, sondern 20px.

Lösung:

Versuchen Sie, nur einem Feld einen Rand hinzuzufügen.

2. Bei zwei verschachtelten Blockelementen gilt: Wenn das übergeordnete Element keinen oberen Rand und keine obere Grenze hat, wird der obere Rand des übergeordneten Elements mit dem oberen Rand des untergeordneten Elements zusammengeführt und der zusammengeführte Rand ist der größere der beiden.

<Stil>
        .box1 {
            Breite: 150px;
            Höhe: 100px;
            Rand oben: 20px; 
            /* Rahmen: 1px durchgezogen #000000; */
            Hintergrundfarbe: rot;
        }

        .box2 {
            Breite: 100px;
            Höhe: 100px;
            /* Rahmen: 1px durchgezogen #000000; */
            Hintergrundfarbe: Rebeccapurple;
            Rand oben: 10px;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Box1">
        <div Klasse="box2"></div>
    </div>
</body>

Zu diesem Zeitpunkt werden die beiden Felder zusammengeführt und der obere Rand beträgt 20 Pixel.

Lösung:

① Definieren Sie den oberen Rand für das übergeordnete Element

② Definieren Sie den oberen Rand für das übergeordnete Element

③Fügen Sie overflow:hidden zum übergeordneten Element hinzu.

④Floating hinzufügen

⑤Absolute Positionierung hinzufügen

3. Wenn ein leeres Blockelement vorhanden ist und Rahmen, Polsterung, Inline-Inhalt, Höhe und Mindesthöhe nicht vorhanden sind, gibt es keine Behinderung zwischen den oberen und unteren Rändern und die oberen und unteren Ränder werden zusammengeführt.

<p style="margin-bottom: 0px;">Der Abstand zwischen diesem Absatz und dem folgenden Absatz beträgt 20px</p>

<div Stil="Rand oben: 20px; Rand unten: 20px;"></div>

<p style="margin-top: 0px;">Der Abstand zwischen diesem Absatz und dem Absatz darüber beträgt 20px</p>

Es ist ersichtlich, dass die Breite des mittleren Divs 0 beträgt und die oberen und unteren Ränder zusammengeführt werden und nur der Maximalwert des Randes übernommen wird.

Dies ist das Ende dieses Artikels zur Lösung des Randkollapsproblems in CSS. Weitere relevante CSS-Randkollapsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!