Lösung für die Lücke zwischen Divs

Wenn Sie HTML-Div-Blöcke verwenden und die Mitte der Blöcke nicht fest verbunden werden kann und Sie das Problem nicht lösen können

1. Sie können im mittleren Inhalt einen <head></head> hinzufügen

* {
Rand: 0;
Polsterung: 0;
}

Setzen Sie den Abstand zwischen allen Blöcken auf Null, ohne mit dem darunter liegenden Abstand in Konflikt zu geraten.

2. Es gibt ein Problem mit dem Abstand zwischen den oberen und unteren Divs

Ich habe 4 Divs geschrieben, nach oben und unten verteilt, mit Abstand zwischen ihnen. Der Code und die Wirkung sind wie folgt:

.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}
<Text>
<div Klasse="div1" ></div>
<div Klasse="div2"></div>
<div Klasse="div3"></div>
<div Klasse="div4"></div>
</body>

Dann habe ich versucht, jedem Div margin:0 hinzuzufügen, um den Abstand zwischen den Divs zu entfernen. Der Code lautet wie folgt:

.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
Rand: 0;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
Rand: 0;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
Rand: 0;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
Rand: 0;
}

Das Ergebnis bleibt das gleiche, es besteht jedoch immer noch eine Lücke, wie unten gezeigt:

Als nächstes suchte ich in Baidu nach einer Methode zum Einstellen der Schriftgröße. Der Code und die Wirkung sind wie folgt:

Textkörper{Schriftgröße:0;}
.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}

Der obige Code konzentriert sich auf das Hinzufügen von body{font-size:0;} und hat folgende Auswirkung:

Sie können sehen, dass die Lücke zwischen der Ober- und Unterseite des Divs geschlossen wurde. Oben und links ist jedoch immer noch eine Lücke vorhanden.

Dazu habe ich Folgendes gemacht und body{margin:0px;} hinzugefügt. Der Code lautet wie folgt:

Körper {margin:0px;}
Textkörper{Schriftgröße:0;}
.div1{
Höhe: 100px;
Hintergrundfarbe: blau;
Position: relativ;
}
.div2 {
Höhe: 100px;
Hintergrundfarbe: blauviolett;
Position: relativ;
}
.div3{
Höhe: 100px;
Hintergrundfarbe: rot;
Position: relativ;
}
.div4{
Höhe: 100px;
Hintergrundfarbe: gelb;
Position: relativ;
}

Die Wirkung ist wie folgt:

Wie Sie sehen, wurden sämtliche Abstände entfernt.

Es besteht jedoch weiterhin ein Problem: Wenn Sie font-size:0; festlegen, werden alle Schriftarten gelöscht.

So habe ich es gelöst: Fügen Sie ein Div innerhalb eines Div hinzu und setzen Sie die Schriftgröße des inneren Divs zurück, zum Beispiel: font-size: 30px;.

Perfekte Lösung!

3. Nachdem DIV+CSS clear:both das Floating gelöscht hat, entsteht über dem Div eine Lücke

Wir wissen, dass die Verwendung von CSS-Float manchmal CSS-Float erzeugt. Zu diesem Zeitpunkt müssen wir den Float bereinigen. Dazu können wir das Stilattribut „clear“ verwenden.

Allerdings erscheint nach der Verwendung von „clear:both“ zum Löschen des resultierenden Floats häufig eine weiße Lücke über dem Div, auf das „clear:both“ angewendet wird.

Die Lösung besteht darin, dem Div über diesem Div overflow:hidden hinzuzufügen.

<div Klasse="a versteckt">
<div class="bms_2_1_1 fl">~Ich habe den Ozean überquert, um dich zu sehen,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Peking</div>

Stilbeschreibung:

.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

Dies ist die Lösung für die Div-Lücke, die in den letzten Tagen durch Clear:Both verursacht wurde.

Warum clear:both in div verwenden? Dies liegt hauptsächlich daran, dass der Text in Div B nicht linksbündig ausgerichtet werden kann, selbst wenn in CSS text-align:left festgelegt ist. Daher wird in diesem Fall clear:both verwendet.

Ein paar Fragen:
(1) Warum ist text-align:left; in einem div ungültig?
(2) Warum kann clear:both das Problem lösen, wenn text-align:left; wirkungslos ist?
(3) Warum entstehen bei der Verwendung von clear:both Lücken?
(4) Warum löst die Verwendung von overflow:hidden; im Div der gleichen Ebene darüber das unten aufgeführte Lückenproblem?

Ich werde in Zukunft Gelegenheit haben, die oben genannten Themen im Detail zu studieren.

Zusammenfassen:

Wenn „clear:both“ auf ein Div angewendet wird, um eine Lücke zu erstellen, muss „overflow:hidden;“ zum Div der gleichen Ebene darüber hinzugefügt werden, um die Lücke zu schließen.

<<:

>>: So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes

Lösung für die Lücke zwischen Divs

JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes

Interpretation der Vue-Komponentenregistrierungsmethode

【HTML-Element】So betten Sie Bilder ein

15-minütiges paralleles Artefakt GNU Parallel Erste Schritte

Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten

So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist

Lösung für Indexfehler in MySQL aufgrund unterschiedlicher Feldzeichensätze

JS verwendet Map, um doppelte Arrays zu integrieren

So installieren Sie die IonCube-Erweiterung mit Pagoda

Detaillierte Erläuterung des Problems, dass der Speicherplatz nach dem Löschen der Linux-Datei nicht freigegeben wird

Artikel empfehlen

Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

MySQL Community Server 5.7.19 Installationshandbuch (detailliert)

MYSQL8.0.13 kostenlose Installationsversion Konfiguration Tutorial Beispiel detaillierte Erklärung

Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud

So verwenden Sie Docker zum Erstellen eines privaten pypi-Repositorys

So verwenden Sie Javascript zum Generieren glatter Kurven

Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Der Unterschied zwischen schreibgeschützt und deaktiviert

Tiefgreifendes Verständnis der Matching-Logik von Server und Standort in Nginx

Ursachen und Lösungen für das Problem des verstümmelten Zeichensatzes in der MySQL-Datenbank

So ändern Sie das MySQL-Tabellenpartitionierungsprogramm

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

React-Konfiguration px-Konvertierung rem-Methode

Sammlung gemeinsamer DIV-Attribute