Solución universal para Display: inline-block y sus espacios de separación. Hasta para ie6

Solución universal para Display: inline-block y sus espacios de separación.En un artículo previo (Marzo de 2012) recopilaba 8 soluciones para eliminar los espacios en blanco o de separación inherentes a los elementos con display: inline-block.

Son de lo más variado. Atacan el problema o bien por el html o vía Css. Unas más recomendables que otras. Cierto. Y algunas que, por las propiedades o valores utilizados, no son funcionales en según qué navegadores.

Así que como complemento a aquel artículo a continuación una solución universal en puro Css para evitar los espacios de separación entre los elementos con display: inline-block, sin utilizar las que afectan al marcado del Html.

Solución universal espacios en blanco de inline-block

AVISO: esta solución ha dejado de ser "universal":
Como bien se apunta en este comentario la última versión de Webkit/Blink y un bug la hace no funcional en ellos. Más info

Veamos las técnicas más usadas y donde o en qué navegador fallan y posíblemente antes de llegar al final tú mismo hayas dado con la solución.

Recuerda que todo pasa por anular en el padre de los elementos alguna propiedad para que desaparezca la separación de los hijos para posteriormente compensarla en los hijos que son los que tienen el valor inline-block. Como por ejemplo:

font-size: 0

Problema: Los navegadores Safari no aceptan el valor 0.

word-spacing: -1px

Problema: En esta ocasión es Opera el que no acepta valores negativos

Así que hagamos un mix y los estilos quedarían:

.padre { word-spacing: -1px; font-size: 1px; letter-spacing: -1px; width: 80%;/*o lo necesario*/ }

Y a continuación en los hijos anular estos valores:

.hijos_del_padre { display: inline-block; word-spacing: normal; font-size: 2rem;/*u otra unidad para IE8 y -*/ letter-spacing: normal; white-space: normal; width: XXXvalor;/*El valor necesario*/ }

Y como en un ataque de nostalgia cometí la osadía de nombrar al IE6 ¡en el título! si aún te preocupa éste y su hermano el 7, sólo tienes que añadir al .hijos_del_padre el clásico hack:

zoom: 1; *display: inline;

Y así te aseguras que eliminarás los espacios (naturales) de separación entre elementos inline-block desde ie6 al último, Opera, Safari, Firefox y Chrome.

Origen de la imagen

Publicado el 14 de julio de 2013 y Archivado en

Y para terminar, como agradecimiento a tu visita, déjame que te haga estas sugerencias:

Suscríbete a los artículos.

Nada de spam. Sólo avisos de nuevos posts.

Comparte y sorprende.

votar

También puedes ir a alguno de estos artículos que tienen relación con el que acabas de ver:

Ecos G+

4 comentarios :

  1. Prefiero seguir usando el hack más conocido porquecon éste se pone demasiado código. Con éste sólamente es necesario aplicarlo sobre los elementos que tienen declarado "display: inline-block":

    letter-spacing:-0.31em;
    word-spacing:-0.43em

    Saludos!

    ResponderEliminar
    Respuestas
    1. Bueno, Cristian si de economía de código se tratase lo "óptimo" sería la vía del Html.
      Pero no es esa la intención del artículo.
      La finalidad es tener una forma lo más "universal" posible.

      Y en tu preferencia, además de incompatibilidad con algún navegador por el valor negativo, creo ver "números mágicos" que sólo serán plénamente funcionales en alguna familia tipográfica concreta.

      Un saludo

      Eliminar
    2. Doesn't work in the latest Webkit/Blink releases, unfortunately: http://yuilibrary.com/projects/yui3/ticket/2533109. In general, relying on 'magic constants' of unknown origin is a bad idea.

      Eliminar
    3. Gracias Uid-Abqfrkqz por el aviso.
      Eso me pasa por no verificar al momento y confiar en pruebas ralizadas en versiones anteriores.

      Un saludo

      Eliminar