Zwischenraum bei horizontaler Liste mit display: inline

23. Juni 2007

Der Testcase

Die Liste

Wenn man mit dem Mauszeiger über "Kontakt" hovert, sieht man die Lücke, um die es auf dieser Seite geht:

Diese simple Navigation ist wie folgt gebaut worden:

Sinn und Zweck der Übung war es übrigens, eine einfache horizontale Navigation ohne float zu bauen. Gefloatete Block-Elemente gelten also nicht als Lösung ;-)

Das Problem

Zwischen den beiden Menüpunkten bleibt bei normaler Schriftgröße ein mysteriöser Zwischenraum von etwa 5 Pixeln, obwohl alle horizontalen Abstände auf 0 sind. Auch Firebug zeigt keinerlei margin zwischen den Listenpunkten. Der Zwischenraum verschwindet durch die Anweisung li {margin-left: -5px;}, taucht aber bei einer Vergrößerung der Schrift wieder auf.

Die Vermutung

Da der Zwischenraum abhängig von der Schriftgröße ist, vermute ich extra Whitespace bei den Schriften. li {margin-left: -0.4em; } läßt den Zwischenraum zoomunabhängig verschwinden. Bleiben folgende Fragen:

Lösungen

Soweit zu den Fragen. Die Mitglieder der Mailingliste css-design hatten schon wenige Stunden später einige Antworten parat gehabt. Vielen Dank für die rege Beteiligung ;-)

Die Ursache

Rainer Wagener schrieb:

Es kommt durch den Zeilenumbruch zwischen den <li>. Sobald man den beseitigt, fallen auch die überflüssigen Pixel weg. Genauso wie bei <img>, wo ja auch unten ein kleiner Rand ist. Der dort gern angewandte Trick mit display:block geht hier natürlich nicht.

Für richtige Browser geht auch display:table-cell. Das wäre eigentlich das beste...

Wie heißt es beim W3C: Line breaks are also white space characters. Der Zeilenumbruch nach dem li wird zu einer Leerstelle und entsprechend der Font-Einstellungen formatiert.

"Set a space to fix a space"

Aber es wird noch interessanter. Nils Pooker hatte eine andere Idee:

Die Lücken verschwinden, wenn man zwischen Link-Text und </a> einen Leerschritt setzt! In Peters Beispiel also:

  <li id="navi01"><a href="#">Startseite </a></li>
  <li id="navi02"><a href="#">Kontakt </a><li;/li>

Auch hier hat Rainer wieder eine Erklärung parat, warum dieses Verhalten dem HTML-Standard entspricht:

Bei 2 aufeinanderfolgenden 'Whitespace' wird das 2. ignoriert ... Also wird [der Link mit dem Leerzeichen] etwas länger und die Lücke ist weg. _Ohne_ das Leerzeichen innerhalb des Links würde es genauso ein 'Whitespace' geben, nur eben außerhalb des Links --> Lücke.

Man könnte also tatsächlich eine zusätzliche Leerstelle im Link einbauen, um die Leerstelle zwischen den Listenelementen zu entfernen! "Set a space to fix a space", frei nach Eric Meyer. Faszinierend.

Aber die HTML-Specs sagen auch: ... authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag. Trotzdem keine schlechte Option.

Fazit

Unterm Strich bleiben folgende Möglichkeiten

  1. Zwischenraum akzeptieren - und ggfs. ins Design integrieren ;-)
  2. Listenelemente direkt hintereinander schreiben --> unübersichtlicher HTML-Quelltext
  3. Ausgleichen der Leerstelle mit negativem margin
  4. Listenelemente mit display: table-cell statt display:inline nebeneinander stellen (geht aber nicht im IE)
  5. "Set a space to fix a space" - zusätzliche Leerstelle vor </a>

Ideal wäre display: table-cell für die Listenelemente. Ansonsten gefällt mir "Set a space to fix a space" am besten: Eins und eins sind keins. Augenzwinkernd, aber standardgemäß.

Hier also die Navigationsliste mit einer zusätzlichen Leerstellen am Ende des Links:

Nils hat übrigens einen ähnlichen Testcase für vertikale Listen aufgebaut. Sehr interessante Ergebnisse.