soy Kseso y esto EsCSS

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. Hasta para ie6

·Por Kseso ✎ 13

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

El bug mencionado fue corregido en versiones posteriores.

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.

See the Pen aNporK by Kseso (@Kseso) on CodePen.

Créditos: Origen de la imagen

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso