HTML & CSS: Lücken zwischen Inline-Block Listen entfernen

Einige von euch - vor allem langjährige HTML & CSS Entwickler - kennen eventuell das Problem: Man möchte mit display: inline-block zwei oder mehr Elemente nebeneinander haben, allerdings bleibt eine kleine Lücke. Selbst nach langem Debuggen kann man den Fehler nicht ausfindig machen, doch das Problem ist eigentlich ziemlich einfach zu beheben. Ich habe um es zu vereinfachen einen kleinen Beispielcode vorbereitet:

So soll es nicht aussehen! Lösung 1: letter-spacing: -4px
<style>
li {
display: inline-block;
height: 100px;
width: 120px;
font-size: 50px;
}
</style>
<ul>
<li>No1</li>
<li>No2</li>
<li>No3</li>
<li>No4</li>
</ul>
<style>
ul {
letter-spacing: -4px;
}
li {
display: inline-block;
height: 100px;
width: 120px;
font-size: 50px;
letter-spacing: normal;
}
</style>
<ul>
<li>No1</li>
<li>No2</li>
<li>No3</li>
<li>No4</li>
</ul>
Lösung 2: Leerzeichen/Umbrüche entfernen Lösung 3: ul font-size auf 0 setzen
<style>
li {
display: inline-block;
height: 100px;
width: 120px;
font-size: 50px;
}
</style>
<ul>
<li>No1</li>
<li>No2</li>
<li>No3</li>
<li>No4</li>
</ul>
<style>ul {
font-size: 0;
}
li {
display: inline-block;
height: 100px;
width: 120px;
font-size: 50px;
}
</style>
<ul>
<li>No1</li>
<li>No2</li>
<li>No3</li>
<li>No4</li>
</ul>

Wodurch entsteht die Lücke?

Das ist ziemlich einfach zu erklären. In unserem HTML Quelltext haben wir nach jedem schließenden Listenpunkt einen Zeilenumbruch, welcher als ein Leerzeichen gilt. Normalerweise hat die Formatierung des HTML Quellcodes keine Auswirkungen auf die Ausgabe. Anders ist dies allerdings bei display: inline-block. Ein Inline-Block Element ist "white-space abhängig", was die Lücken durch die Zeilenumbrüche hervorruft.

Lösung 1

Was genau machen wir hier mit letter-spacing? Ganz einfach! Ein Leerzeichen hat 4px. Durch letter-spacing: -4px lösen wir das Leerzeichen sozusagen auf. Damit innerhalb der <li> Tag's wieder alles normal ist, stellen wir letter-spacing wieder auf letter-spacing: normal.

Lösung 2

Die wahrscheinlich einfachste Lösung ist die Zweite hier aufgelistete. Es wird einfach der Zeilenumbruch zwischen dem schließenden und dem öffnenden <li> Tag entfernt. Dadurch kann auch keine Lücke entstehen. Man kann die Lücke übrigens auch einfach auskommentieren: <!-- -->. Warum ich diese Methode nach der ersten Lösung gewählt habe? Sie kann den Quellcode sehr sehr unübersichtlich machen, gerade in Verbindung mit JavaScript. Je nach Code-Komplexität kann man diese Methode also vorziehen.

Lösung 3

Diese Lösung ist nur zu empfehlen, wenn nichts anderes hilft. Man stellt die font-size im <ul> Tag auf font-size: 0. Im <li> Tag kann man diese dann wieder auf die gewünschte Größe stellen. Doch hier ist Vorsicht geboten. Das übergeordnete <ul> Tag hat jetzt die Font Größe 0, dass bedeutet das man im <li> Tag keine Prozent oder em Werte benutzen kann. Das macht die Lösung fast unbrauchbar, außer man weiß die genaue Größe.

Du hast Probleme oder Feedback? Melde dich in den Kommentaren oder unter "Kontaktiere mich!"