El problema del espacio entre elementos inline e inline-block

A veces, cuando queremos colocar elementos inline o inline-block sin ningún espacio entre ellos, aparece una 'extraña' separación de unos pixels que estropea el diseño que pretendiamos conseguir.

Podemos ver un ejemplo de este problema si queremos hacer la siguiente barra de controles de vídeo:

Los botones son imágenes simples del tipo:

Puesto que las imágenes son elementos inline, podriamos pensar que si las colocamos sin márgenes, quedarán juntas. El div con la barra de progreso (#progressBar) lo haremos inline-block en el CSS y todo debería quedar en línea y sin espacios. El CSS y HTML relevante es el siguiente:

//HTML

   
   
   

      ...
   
   
   


//CSS
#progressBar {
   display: inline-block;
}

No definimos ningún margen ni padding en las imágenes. Deberían quedar juntas pero aparece una separación entre ellas:

¿De donde sale ese espacio?¿cómo podemos eliminarlo?

El culpable es el salto de línea

El problema es el salto de línea entre los elementos inline. Para los navegadores es un espacio en blanco y lo deben mostrar. Si eliminamos el salto de línea en el HTML desaparece la separación:

//HTML

   
...



//CSS
#progressBar {
   display: inline-block;
}

Ahora no hay saltos de línea en el HTML y el diseño aparece correcto:

El problema es que el HTML puede resultar confuso e ilegible. Cuando sólo tenemos unas pocas imágenes el problema no es muy evidente. Si tenemos muchos elementos, que ademas pueden ser divs complejos, conteniendo a su vez muchas etiquetas, esta solución es inaceptable. El código resulta inmantenible.

Comentar los saltos de línea

Una solución para eliminar los saltos de línea y mantener el formato, es utilizar comentarios de HTML para enmascararlos:

//HTML

      

         ...
      



//CSS
#progressBar {
   display: inline-block;
}

El espacio depende del tipo y tamaño de letra

La solución/chapuza de asignar un margen negativo a los elementos para compensar el espacio, no es una buena idea. La separación es en realidad un espacio en blanco y su tamaño depende del tipo y tamaño de letra que estemos utilizando. Si cambiamos la letra cambiará la distancia entre los elementos.

No asignes un margen negativo para compensar la separación. Si cambias la letra variará el espacio entre elementos.

Reducir el tamaño de letra a cero

Si reducimos el tamaño de letra a cero, el ancho del espacio también será cero y solucionaremos el problema. Obviamente tendremos despues que redefinir el tamaño de letra adecuado en los elmentos inline o inline-block que lo necesiten.

En nuestro ejemplo vamos a suponer que dentro del div '#progressBar' tenemos que mostrar algún texto:

//HTML

   
   
   

      ...
   
   
   


//CSS
#progressBar {
   display: inline-block;
}

#videoControls {
   font-size: 0;
}

#videoControls > div {
   font-size: 10px;               
}

En el contenedor de los elementos ("#videoControls") definimos font-size: 0 y en los elementos que sea necesario volvemos a definir el tamaño correcto font-size: 10px.

Es importante definir el tamaño en unidades absolutas. No podemos utilizar unidades relativas al valor del padre, como % o em. Una buena solución es utilizar rem ( root em ), que es relativa al valor declarado en el elemento raiz del documento (html).

//CSS
#videoControls {
   font-size: 0;
}

#videoControls > div {
   font-size: 1rem;               
}

Si queremos recuperar el tamaño de fuente para todos los hijos:

//CSS
#videoControls > * {
   font-size: 10px;               
}

NOTA: Este método no funciona en los navegadores de Android pre-Jellybean.

Utilizar float en vez de inline

Esta es la solución más común para diseños complejos. Colocamos los elementos juntos utilizando 'float: left' o 'float: right' que no presentan este problema. Por supuesto hay que conocer y tener en cuenta las particularidades de este tipo de posicionamiento.

En nuestro ejemplo el código quedaría:

//HTML

   
   
   

      ...
   
   
   


//CSS

.right{
  float: right;
}

.left{
  float: left;
}

#videoControls > img, #progressBar {
   margin: 0;
}

El resultado es perfecto:

Es importante eliminar el margen de los elementos para que queden juntos. Algunos elementos presentan valores por defecto, aunque no se los definamos.

Hemos tenido que cambiar el orden de las últimas dos imágenes en el HTML para que aparezcan como queremos. Esta es una de las particularidades del posicionamiento float de las que hablabamos antes. Hay muchas más...