Detaillierte Erklärung mehrerer Möglichkeiten zum Entfernen der Lücke zwischen Inline-Blockelementen in CSS

Bei der Arbeit an mobilen Seiten werden in letzter Zeit häufig Inline-Blockelemente für das Layout verwendet. Dabei tritt jedoch ein unvermeidliches Problem auf, nämlich die Lücke zwischen den Inline-Blockelementen. Diese Lücken können Layoutprobleme verursachen und müssen entfernt werden. Hier finden Sie eine kurze Zusammenfassung zu Inline-Blockelementen und wie Sie Lücken entfernen.

Was ist ein Inline-Block?

Inline-Blöcke oder Inline-Blöcke können in der CSS-Elementklassifizierung in drei Typen unterteilt werden: Inline-Elemente oder Inline-Elemente, Elemente auf Blockebene und Inline-Block-Elemente.

Inline-Blockelemente verfügen über die Eigenschaften sowohl von Inline-Elementen als auch von Elementen auf Blockebene: (1) Die Elemente können horizontal angeordnet werden, und (2) sie können als Elemente auf Blockebene behandelt werden, um verschiedene Attribute wie Breite, Höhe, Polsterung usw. festzulegen.

Beispiel 1: Definieren Sie einen Inline-Elementbereich als Inline-Blockelement

<div id="demo">
    <span>Ich bin ein Span</span>
    <span>Ich bin ein Span</span>
    <span>Ich bin ein Span</span>
    <span>Ich bin ein Span</span>
</div>
#demo span{
    Anzeige: Inline-Block;
  Hintergrund:#ddd;
}

Effektbild:

Inline-Block-Kompatibilität

(1) Elemente der Inline-Ebene

Bei Inline-Elementen unterstützen alle gängigen Browser das direkte Festlegen des Anzeigewerts auf „Inline-Block“, um ihn als Inline-Block zu definieren.

(2) Elemente auf Blockebene

IE7 und ältere Browser unterstützen Blockelemente nicht vollständig. Sie unterstützen nur die Verwendung von display:inline-block, um ein Inline-Element als Inline-Block zu definieren.

Da IE7 und ältere Browser das direkte Festlegen von Elementen auf Inline-Ebene in Inline-Blöcke unterstützen, können wir dies in einem Workaround implementieren, indem wir zuerst das Element auf Blockebene auf Inline festlegen und dann das hasLayout des Elements auslösen, um ihm ähnliche Funktionen wie einem Inline-Block zu geben. Sie können schreiben:

Beispiel 2:

<div id="demo">
    <div>Ich bin ein Div</div>
    <div>Ich bin ein Div</div>
    <div>Ich bin ein Div</div>
    <div>Ich bin ein Div</div>
</div>
#demo div{
    Anzeige: Inline-Block;
    *display:inline; /*IE7-Hack*/
    *zoom:1; /*hasLayout auslösen*/
}

IE7 und darunter: Elemente auf Blockebene werden in Inline-Blöcke konvertiert, und in IE7 und darunter erscheint keine Lücke zwischen den Elementen; Elemente auf Inline-Ebene werden in Inline-Blöcke konvertiert, und in IE7 und darunter erscheinen Lücken zwischen den Elementen; unmittelbar nach der Konvertierung von Blockebene in Inline-Block gibt es ein von Inline-Ebene in Inline-Block konvertiertes Element, und in IE7 und darunter erscheint keine Lücke zwischen den beiden Elementen; unmittelbar nach der Konvertierung von Inline-Ebene in Inline-Block gibt es ein von Blockebene in Inline-Block konvertiertes Element, und in IE7 und darunter erscheint eine Lücke zwischen den beiden Elementen; in allen anderen Browsern erscheinen Lücken;

Ursprung der Lücke zwischen Inline-Blockelementen

In Beispiel 1 erzeugt das als Inline-Block definierte Element eine Lücke. Welchen Effekt hat es, wenn display:inline-block nicht gesetzt ist? wie folgt:

Beispiel 3:

<div Klasse="Demo">
        <span>Ich bin ein Span</span>
        <span>Ich bin ein Span</span>
        <span>Ich bin ein Span</span>
        <span>Ich bin ein Span</span>
</div>

.demo span{
     Hintergrund:#ddd;
}

Effektbild:

Im obigen Beispiel gibt es immer noch Lücken ohne jegliche Verarbeitung auf der Spanne. Was ist der Grund dafür? Handelt es sich um ein strukturelles Problem? Schauen wir uns an, welche Auswirkungen es hat, wenn alle Span-Tags in einer Zeile geschrieben werden:

<div Klasse="Demo">
        <span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span>
    </div>
.demo span{
         Hintergrund:#ddd;
}

Effektbild:

Sie können erkennen, dass die Lücke durch einen Zeilenvorschub oder einen Wagenrücklauf verursacht wird. Solange Sie die Tags in einer Zeile bzw. direkt und ohne Leerzeichen zwischen den Tags schreiben, entstehen keine Lücken. Allerdings ist diese Methode nicht sehr zuverlässig. Es gibt zu viele unkontrollierbare Faktoren, die Fehler verursachen können, wie z. B. Codegenerierungstools, Codeformatierung oder andere Personen, die den Code ändern. Nachfolgend sind verschiedene Methoden zur Lückenbeseitigung aufgeführt. Ob diese geeignet sind, hängt vom jeweiligen Anwendungsszenario ab.

Entfernen Sie die Lücke zwischen Inline-Blockelementen

(1) Entfernen Sie Leerzeichen zwischen Tags

Die Lücken zwischen den Elementen entstehen durch die Leerzeichen zwischen den Element-Tags. Wenn Sie die Leerzeichen entfernen, verschwinden die Lücken. Schauen wir uns die folgenden Schreibweisen an:

*Schreibmethode 1:

<div Klasse="Demo">
        <span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span><span>Ich bin ein Span</span>
    </div>

*Schreibmethode 2:

<div Klasse="Demo">
        <span>Ich bin ein Span
        </span><span>Ich bin ein Span
        </span><span>Ich bin ein Span
        </span><span>Ich bin ein Span</span>
    </div>

*Schreibmethode 3: Verwenden von HTML-Kommentar-Tags

<div Klasse="Demo">
        <span>Ich bin ein Span</span><!-- 
        --><span>Ich bin ein Span</span><!-- 
        --><span>Ich bin ein Span</span><!-- 
        --><span>Ich bin ein Span</span>
    </div>

(2) Tag-Schließung abbrechen

<div Klasse="Demo">
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span
    </div>

.demo span{
	     Hintergrund:#ddd;
	     Anzeige: Inline-Block;
		}

Entfernen Sie das End-Tag des Span-Tags, sodass keine Lücke entsteht. Um mit IE6/IE7 kompatibel zu sein, muss das letzte Tag geschlossen werden.

<div Klasse="Demo">
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span</span>
    </div>
.demo span{
         Hintergrund:#ddd;
         Anzeige: Inline-Block;
        }

Diese Methode scheint auf der Meituan-Webanwendungsseite verwendet zu werden. Sie können sehen:

Quelltext:

(3) Verwenden Sie die Schriftgröße: 0.

Die Verwendung von font-size:0; im übergeordneten Container kann die Lücke schließen. Sie können Folgendes schreiben:

<div Klasse="Demo">
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span</span>
    </div>
    .demo {Schriftgröße: 0;}
    .demo span{
         Hintergrund:#ddd;
         Anzeige: Inline-Block;
         font-size: 14px; /*Entsprechende Schriftgröße einstellen*/
    }

Für Chrome gibt es standardmäßig eine Mindestbeschränkung für die Schriftgröße. Aus Kompatibilitätsgründen müssen Sie die Beschränkung der Schriftgröße aufheben. Schreiben Sie dazu Folgendes:

<div Klasse="Demo">
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span
        <span>Ich bin ein Span</span>
    </div>
    .demo {Schriftgröße: 0;-webkit-text-size-adjust:none;}
    .demo span{
         Hintergrund:#ddd;
         Anzeige: Inline-Block;
         font-size: 14px; /*Entsprechende Schriftgröße einstellen*/
    }

Das Obige ist eine Zusammenfassung des Wissens über einige Probleme, die bei der Arbeit auftreten. Ich hoffe, es wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützt.