5 Möglichkeiten, um schnell den Leerraum eines Inline-Blocks in HTML zu entfernen

Der Eigenschaftswert „Inline-Block“ ist sehr nützlich, wenn Sie Ränder und Abstände bei „Inline“-Elementen steuern müssen, sodass Sie diese Elemente nicht mehr als „Block“ oder „Float“ kennzeichnen müssen. Es gibt jedoch ein Problem: Bei der Verwendung von Inline-Blöcken werden die Leerzeichen zwischen den HTML-Elementen auf der Seite angezeigt. Sehr ärgerlich. Es gibt einige Möglichkeiten, diese Leerzeichen zu entfernen; eine davon ist ziemlich clever.

Methode 1: Kein Abstand zwischen den Elementen

Eine 100 % sichere Methode, dies zu beheben, besteht darin, keine Leerzeichen zwischen den Elementen in Ihrem HTML zu lassen:

Das sieht natürlich chaotisch aus und erschwert die Wartung des Codes, ist aber praktisch, intuitiv und vor allem ... zuverlässig.

Methode 2: Setzen Sie die Schriftgröße auf 0 für das übergeordnete Element.

Die beste Lösung für dieses Leerzeichenproblem besteht darin, für das übergeordnete Element dieser Inline-Blockelemente die Schriftgröße „font-size: 0“ festzulegen. Wenn Sie einen Inline-Block <LI> innerhalb Ihres <UL> haben, können Sie Folgendes tun:

Um zu verhindern, dass die Schriftgröße des übergeordneten Elements das untergeordnete Element beeinflusst, müssen Sie den Schriftgrößenwert für das untergeordnete Element neu festlegen. Dies ist normalerweise ganz einfach. Probleme könnten nur dann auftreten, wenn Sie relative Schriftgrößen verwenden. Aber in den meisten Fällen kann diese Methode Ihr Problem lösen.

Methode 3: HTML-Kommentare

Diese Methode erfordert etwas mehr rohe Gewalt, funktioniert aber genauso gut. Das Auffüllen von HTML-Elementen mit Kommentaren hat denselben Effekt, als ob zwischen ihnen kein Leerzeichen wäre:

Mit einem Wort: widerlich. In zwei Worten: widerlich. In drei Worten...OK, Sie verstehen es. Aber es funktioniert!

Methode 4: Negative Margen

Sehr ähnlich zu Methode 2 , tut mir leid. Sie können die Flexibilität von Inline-Blöcken ausnutzen und ihnen einen negativen Rand geben, um die Leerzeichen zu verbergen:

Diese Methode ist am wenigsten empfehlenswert, da Sie verschiedene Situationen berücksichtigen müssen und manchmal unvorhergesehene Lücken auftreten. Von diesem Trick sollten Sie besser nicht Gebrauch machen.

Methode 5: Kettenglied

Eine weitere Möglichkeit, HTML-Markup zu nutzen, besteht darin, das schließende Tag eines Elements nahe am öffnenden Tag des nächsten Elements zu platzieren:

Nicht so hässlich wie HTML-Kommentare, aber ich würde diese Leerzeichen unabhängig von der Lesbarkeit des Codes lieber manuell entfernen.

Kein Ansatz ist ideal, aber auf einer Webseite keinen Leerraum zu lassen, ist ein schlechter Ansatz. Dies ist keine Warnung, Inline-Block nicht zu verwenden. Inline-Block ist immer noch sehr nützlich. Sie müssen nur verstehen, wie Sie mit den darin enthaltenen Leerzeichen umgehen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.