CSS: corregir margen en elementos inline-block

Uno de los quebraderos de cabeza que se tiene a la hora de diseñar una web responsive, es trabajar con los bloques en la misma línea. Para ello, se suele utilizar la propiedad display: inline-block junto con la propiedad vertical-align: (top/middle/bottom…). El problema de usar inline-block, es que genera unos incómodos espacios entre los los elementos.

¿Como corregir esto? En CSS-trciks encontré las respuestas.

Hay cuatro maneras de solucinarlo:

Quitar los espacios en el código

Los espacios aparecen porque en el código tienes o bien un espacio o salto de línea en el código, algo que es lógico cuando quieres tener un código limpio. Comprimir el código o alguna de estas opciones solucionaría el problema:

Cerrando y abriendo la etiqueta en la misma línea y continuar en la siguiente:

<ul>
  <li>
   uno</li><li>
   dos</li><li>
   tres</li>
</ul>

Lo contrario que en el caso anterior. Cerrar la etiqueta en la siguiente línea:

<ul>
  <li>uno</li
  ><li>dos</li
  ><li>tres</li>
</ul>

O usando comentarios. Esta me parece la más engorrosa de las tres.

<ul>
  <li>uno</li><!--
  --><li>dos</li><!--
  --><li>tres</li>
</ul>

Si te gusta tener el código bien tabulado y limpio, no son muy buenas opciones.

Aplicar margen negativo

Aplicando un margen negativo a la izquierda o derecha de todos los elementos, se solucionaría el problema. Este sistema puede que no funcione  bien IE 6 y7, pero esto a estas alturas no debería preocupar en absoluto. Deberías estar desarrollando como mínimo y, cada vez menos, para IE8.

ul li {
  display: inline-block;
  margin-right: -4px;
}

 No cerrar las etiquitas

En html5 funcionará correctamente, pero volvemos a lo de siempre, no es código limpio y no sigue el estándar.

<ul>
  <li>uno
  <li>dos
  <li>tres
</ul>

Poniendo font-size de la capa contenedora a cero

<ul>
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
</ul>

ul
{
 font-size: 0;
 padding: 0px;
}

ul li
{
 display: inline-block;
 vertical-align: middle;
 background-color: red;
 font-size: 14px;
 padding: 5px 10px;
}

Esta es una de las mejores opciones por su comodidad, pero tiene algunos inconvenientes:

• En Android, en concreto en la Jelly Bean, no funciona. Una de las soluciones que aportan, es poner la fuente a un tamaño muy pequeño (0.001px:) en vez de a 0px.
• Otra inconveniente que puede generar es que “resetea” el tamaño de fuente a 0px, por lo que si trabajas en em. Tienes dos opciones, una es usar rem o bien volver a definir el tamaño de fuente.
• Por último, IOS. Si utilizas @font-face puede que las fuentes pierdan suavidad y se vean algo pixeladas.

Usar FlexBox o cajas flexibles

ul.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Aquí puedes ver todos los ejemplos.