Los <li> con inline-block

A muchos os habrá pasado algún día que intentando hacer un menú con el elemento lista de html, os ha pasado algo raro, se os estaba colando un espacio entre <li> y <li> y no sabíais de donde venía. Pues bien, en este artículo vamos a explicar cómo solucionarlo, y una manera distina de hacerlo

Empezaremos haciendo una lista sencilla con tres elementos, que luego convertiremos en botones.

     
item 1
     
item 2
     
item 3

Esto nos generará una lista como ésta:
 

A continuación, vamos a darle una apariencia de menú añadiéndole los siguientes estilos:

ul { list-style-type : none; list-style-image : none; margin: 0px; padding: 0px; }
ul li { display : inline-block; margin:0; padding:0; }
ul li a { display : block; background-color:#aaa; color:#fff; padding:5px 10px; text-decoration:none; }

Y obtendremos este resultado:



Pero como podéis observar, aunque le hemos dicho que los items de la lista tienen un margin y un padding 0, los elementos aparecen con 1 o 2 pixeles de separación. ¿porqué pasa esto?, pues es un extraño caso de que tiene que ver con el tamaño de la fuente utlizada en los elementos marcados como inline-block. Para solucionar esto, basta con modificar la forma en que escribimos las listas en html, veamos un ejemplo de cómo podríamos solucionarlo:

     

          item 1
     

          item 2
     

          item 3
     

Aquí vemos el resultado de este extraño caso:


Así es, si unimos el final de la etiqueta <li> con el inicio del siguiente item de la lista, solucionaremos este error, que tantos quebraderos de cabeza me ha dado.

Y así termina esta entrada,

Hasta la próxima!!