Immer wieder taucht die Frage nach dieser Problemstellung auf: „Warum hat meine Navigation Abstände zwischen den Links und wie bekomme ich sie weg?“ Für alle, die das Problem nicht kennen, hier ein kurzer Überblick.

Benutzst du beispielsweise eine ul-Liste für die Navigation und stellst die Elemente über display:inline-block nebeneinander dar, sollte das Markup und CSS in etwa wie folgt aussehen:

<style>

ul {

list-style:none;

margin:0px;

padding:0px;

}

li {

display:inline-block;

padding:10px 30px;

background-color:#ccc;

}

</style>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

</ul>

Das Ergebnis eines solchen Stylings ist meistens vollkommen zufriedenstellend und sieht wie im nachfolgenden Screenshot aus.

Beachtet die Abstände zwischen den Inline-Block-Elementen. Manchmal sind diese kleinen Abstände jedoch störend beziehungsweise einfach nicht gewünscht. Als Bug ist dieses Verhalten jedoch nicht einzustufen. Schließlich wollen wir, dass ein Leerzeichen in einem Inline-Element auch als solches dargestellt wird. Minifiziert man denselben Quelltext – es werden also alle <li>-Elemente in einer Zeile hintereinander geschrieben – tritt das besagte Problem nicht mehr auf.

Bei einer zunehmender Anzahl von Elementen in einer Navigation, könnte diese Lösung jedoch schnell unübersichtlich werden und würde auch den Coding-Standards in Bezug auf die Lesbarkeit widersprechen.

Eine Alternative, ist das Entfernen von Leerzeichen zwischen den <li>-Elementen indem du die Tags „aufteilst“.

<ul>

<li><a href='#'>Link 1</a></li><li>

<a href='#'>Link 2</a></li><li>

<a href='#'>Link 3</a></li>

</ul>

Eine weitere Möglichkeit ist, das Setzen von HTML-Kommentare, um den gleichen Effekt zu erzielen. Jedes li-Element bleibt in einer eigenen Zeile und ein leeres HTML-Kommentar wirkt auch nicht zu stark ablenkend. Aber trotzdem: das ist auch keine saubere Lösung.

<ul>

<li><a href='#'>Link 1</a></li><!--

--><li><a href='#'>Link 2</a></li><!--

--><li><a href='#'>Link 3</a></li>

</ul>

Auch mit dem Weglassen des schließenden </li> Tags ist eine Option um den störenden Abstand zu beseitigen. Das sieht zwar gewöhnungsbedürftig aus, ist aber, trotz keinem „Self-Closing-Tag“, in HTML5 valide.

<ul>

<li><a href='#'>Link 1</a>

<li><a href='#'>Link 2</a>

<li><a href='#'>Link 3</a>

</ul>

Natürlich kannst du das Problem nicht nur mit HTML, sondern auch mit CSS lösen.

Die Abstände verschwinden, wenn du die Schriftgröße des Listen-Elements auf 0 setzt. Dabei musst du dem Kind-Element allerdings wieder eine lesbare Schriftgröße geben, da sonst nichts sichtbares mehr dargestellt wird.

ul {

list-style:none;

margin:0px;

padding:0px;

}

li {

display:inline-block;

padding:10px 30px;

background-color:#ccc;

font-size:0px;

}

a {

font-size:16px;

}

Besonders aufpassen musst du hier, wenn man mit em-Werten arbeitet, da diese sich auf das Eltern-Element beziehen und bei einer Schriftgröße von 0 immer bei 0 bleiben würden. Auch wird berichtet, dass diese Technik Probleme mit einigen Android-Browsern nach sich ziehen können und in älteren Safaris das Anti-Aliasing der Schrift deaktivieren.

Mit negativen margin-Werten kannst du den störenden Abstand ebenfalls beseitigen. Mit einem margin: von -4px; verschwinden die Lücken zwischen den einzelnen Elementen.

ul {

list-style:none;

margin:0px;

padding:0px;

}

li {

display:inline-block;

padding:10px 30px;

background-color:#ccc;

margin-right:-4px;

}

Wenn dich der fehlende Support von Internet Explorer 6 und Internet Explorer 7 nicht stören, ist der negative Abstand eine praktikable Lösung.

Wenn du nicht vor hast die Navigation zentriert darzustellen, musst du die Elemente im Prinzip auch nicht mit inline-block ausrichten. In dem Fall reicht ein einfaches float vollkommen aus um den gewünschten Effekt zu erzielen. Dies dürfte außerdem die sicherste Methode sein, um die Abstände zwischen den Elementen mit reinem CSS zu eliminieren.

Seid ihr auch schon mal auf dieses Problem gestoßen?