Ayer noche me dio por hacer una lista de imágenes para utilizarla como menú y se me ocurrió la genial idea de hacerla mediante el display:inline, como no… me dejaba ese extraño espacio entre las listas, que no se puede solucionar mediante padding o marging, después de buscar por internet durante un largo rato encontre la solución, espero que os sea de utilidad.
Si nosotros aplicamos el código lógico para hacer una lista vertical mediante Display:inline, vemos que aparece el siempre molesto espacio de separación.
<ul>
<li><a href=”#”>uno</a></li>
<li><a href=”#”>dos</a></li>
<li><a href=”#”>tres</a></li>
<li><a href=”#”>cuatro</a></li>
</ul>
con el siguiente estilo:
ul { display: inline; }
li { display: inline; border: 1px solid #0000CC; }
Tendréis exactamente el mismo error que muestro en la imagen, para solucionarlo basta con escribir el codigo en una linea, triste pero cierto, si envezde lo anterior ponemos:
<ul>
<li><a href=”/section1/”>Section 1</a></li
><li><a href=”/section2/”>Section 2</a></li
><li><a href=”/section3/”>Section 3</a></li
><li><a href=”/section4/”>Section 4</a></li>
</ul>
Nos solucionara el problema aunque tendremos un código mas complejo de leer.
fuente: Memory Dump
Diseño 
web 
Video