Leeräume zwischen vertikalen Listen entfernen

Bei der Verwendung von Listen (ul) kann es bei einer vertikalen Anordnung via display: inline-block; zu Leerräumen zwischen den Listenelementen kommen. Dieses Verhalten ist insbesondere in Kombination mit Rahmen oder Hintergrundfarben störend.

Die Leerräume entstehen durch unsichtbare Leerzeichen zwischen den Listenelementen. Sie lassen sich umgehen, indem die Schriftgröße des übergeordneten Elements auf „0“ gesetzt wird. Anschließend muss den einzelnen Listenelemente wieder die eigentliche Schriftgröße zugeordnet werden.

#menu ul {
    font-size: 0;
}
#menu ul li {
    font-size: 14px;
}

Schreibe einen Kommentar