¿Cómo deshacerse del espacio en blanco entre los elementos de la lista horizontal css?

Tengo la siguiente página de prueba y CSS. Cuando se muestra, hay un espacio de 4px entre cada elemento de la lista. ¿Cómo consigo que los artículos estén uno al lado del otro?

         

El css:

 ul.nav, ul li.nav { display: inline; margin: 0px; padding: 0px; } ul.nav { list-style-type: none; } li.nav { background-color: red; } a.nav { background-color: green; padding: 10px; margin: 0px; } a:hover.nav { background-color: gray; } 

Necesita usar la display:block y float:left en la línea para eliminar el espacio. Cuando están en línea, el navegador los trata como palabras, y deja espacio entre ellos.

También vea mi pregunta similar .

Combine @Skilldrick y @teedyay y tendrá su respuesta y explicación.
Si

  • s son tratados como palabras, cualquier espacio en blanco a su alrededor se condensa en un espacio.

    Así que supongo que esta es una característica que parece un error.

    Para eliminar el espacio, coloque todos sus

  • s en una cadena sin espacio en blanco entre ellos.
    O
    Reduzca el tamaño de fuente en el

      a 0 y restaure el tamaño en el

    • s

      También puede establecer font-size:0 para la etiqueta

        .

        Me temo que esto también es sucio, pero me sorprenderá (gratamente) si hay una solución limpia para esto.

        Pon todos tus

      • en una línea:

          

        Lo siento.