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

Solución universal (hasta para ie6) para eliminar los espacios de separación propios de los elementos con display: inline-block.

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
Comparte

Este blog no usa "botones sociales" para que compartas su contenido por respeto a tu privacidad y mejora de su funcionamiento. Además, no los necesitas, ¿o sí?

Publicado el por y Archivado en | |

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

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

13 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
  2. y Hoy día, se que ya el tema es viejo y sigo arreglando cada problema del inline-block debidamente por proyecto (aveces con los comentarios en html, otras con el font-size) pero bueno, es que... a ver una solución universal es mucho pedir!!??? jejeje.

    No mentiras. Por cierto Kseso tienes literalmente una mina en este blog, entre mas cavo al pasado más oro encuentro, si hubieran elecciones te llevarías la presidencia (por lo menos las hispanas).

    Te ando debiendo una vida cervezas. Saludos.

    ResponderEliminar
  3. Hola yo he estado usando desde hace mucho tiempo la solución con font-size: 0; pero me vengo a dar cuenta que en internet 7 no funciona, siguen esos espacios en blanco. Parece que safari no es el único que no corrige el problema con esta solución. Como podría solucionar los espacios con css en ie7?

    ResponderEliminar
    Respuestas
    1. Hola Isaac
      No he seguido la evolución de las inconsistencias de los navegadores con ciertos valores.
      Pero creo que si buscas una forma sencilla, simple y eficiente para todos la mejor vía es la de actuar en el html, no con Css.
      Pásate por el artículo Display: inline-block y sus espacios en blanco de separación. 8 soluciones donde las expongo.

      Un saludo

      Eliminar
  4. Hola kseso no me atrevia a utilizar las soluciones que comentas y ya había visto en el código html, porque pienso que no es lógico tocar la estructura de html para arreglar esto. Por eso me decante por CSS, pero claro veo que no funciona en algunos navegadores, versiones...personalmente crees que utilizando las soluciones vía html no perjudique para nada el documento html? De todas las soluciones para ti cual seria la mas correcta. Un saludo

    ResponderEliminar
    Respuestas
    1. Personalmente me decanto por 2, según el caso.
      Si son elementos sin contenido (mucho) dentro de cada uno, como imágenes, los escribo en 1 sóla línea:

      < img src='.... />< img src='.... />< img src='.... />


      Y si cada ítem contiene suficiente contenido dentro de él y para mantener el código tabulado y poder localizar fácilmente cada hijo del ítem uso los comentarios vacíos:

      < item>
      ... otros elementos
      </item><!--
      -->< item>
      ... otros elementos
      </item>

      Pero no me atrevo a hablar en términos de "más correcta", "mejor"... o similares.

      Eliminar
    2. Sí bien es cierto aveces es la mejor solución, pero viene a ser un problema, donde en X proyecto el html, es dinámico y escrito con php o js, y tu no puedes decidir un cambio sobre como se identa o no el html. Pero de resto me viene de perlas.

      Eliminar
  5. Yo había pensado también en los comentarios vacíos, ya que el problema que tengo actualmente son con imagenes y esta opción se ve bien. A pesar de todo en el articulo cometas que para internet 6 7 con ponerle zoom 0 se corrige. Estoy en lo cierto? El 6 no me interesa porque hace tiempo que deje de maquetar para el pero el 7 a fecha de hoy le sigo dando soporte

    ResponderEliminar
  6. Para los que les interese ie7 ya averigüe con CSS hacer que los elementos inline o inline-block queden pegados. Se usa la técnica del font-size: 0px en conjunto con word-spacing:-1px y por arte de magia ie7 no se resiste. Estos dos estilos se le aplican al padre y si hace falta después se compensan en los hijos.

    ResponderEliminar