Lösen Sie das Problem der Randzusammenführung

1. Die Ränder von Geschwisterelementen zusammenführen

Der Effekt ist wie folgt: (der Abstand zwischen den beiden beträgt 100px, nicht 150px)

2. Außenränder verschachtelter Elemente zusammenführen

Wenn bei zwei verschachtelten Elementen das übergeordnete Element keinen Inhalt enthält oder sich der Inhalt hinter dem untergeordneten Element befindet und keine obere Polsterung und Umrandung vorhanden ist, wird der obere Rand des übergeordneten Elements mit dem oberen Rand des untergeordneten Elements zusammengeführt und der Wert ist der größte obere Rand, der als oberer Rand des übergeordneten Elements verwendet wird. Das Reduzieren erfolgt auch dann, wenn der obere Rand des übergeordneten Elements 0 beträgt. (Einsturz erfolgt nur in vertikaler Richtung)

Lösung:

1. Definieren Sie einen 1 Pixel breiten oberen Rand für das übergeordnete Element.

2. Definieren Sie eine 1-Pixel-Polsterung oben für das übergeordnete Element.

3. Fügen Sie dem übergeordneten Element overflow:hidden hinzu.

Beachten Sie, dass die erste und zweite Methode nicht gut sind und die Größe der Box vergrößern. Die dritte Methode blendet den überquellenden Inhalt aus, wodurch weder die Größe der Box vergrößert wird, noch der Inhalt beeinträchtigt wird.

Zusammenfassen

Oben habe ich Ihnen die Lösung des Problems der Randzusammenführung vorgestellt. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!