A menudo hay “cosas” en maquetación web que son inexplicables. Este caso es una de ellas.

Cuando tenemos una serie de divs (o li o cualquier elemento que queramos) y lo mostramos en inline-block a menudo nos ponen entre los elementos un margen absurdo que tenemos que “reparar” usando margenes laterales negativos (funciona pero es muy chapucero).

Pues bien, eso señoras y señores ¡no es más que el salto de línea en la maquetación! Para solucionarlo debemos poner el código todo seguido (cómo un js minificado). Si se trata de un bucle de PHP (cómo por ejemplo wordpress) también deberemos comprimir el código.

Esto es lo que normalmente hacemos:

     <ul>
          <li>elemento 1</li>
          <li>elemento 2</li>
          <li>elemento 3</li>
          <li>elemento 4</li>
          <li>elemento 5</li>
     </ul>

Y esto es cómo debería quedar para no hacer espacios:

     <ul><li>elemento 1</li><li>elemento 2</li><li>elemento 3</li><li>elemento 4</li><li>elemento 5</li></ul>

Siempre teniendo en cuenta que se aplica una clase parecida a esta:

     ul li{
          display:inline-block;
          *display:inline; /* para navegadores antiguos y IE que no cogen inline-block */
          zoom:1; /* para navegadores antiguos y IE que no cogen inline-block */
     }