Solución universal para Display: inline-block y sus espacios de separación. Hasta para ie6 14.7.13
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
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
Kseso
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
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":
ResponderEliminarletter-spacing:-0.31em;
word-spacing:-0.43em
Saludos!
Bueno, Cristian si de economía de código se tratase lo "óptimo" sería la vía del Html.
EliminarPero 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
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.
EliminarGracias Uid-Abqfrkqz por el aviso.
EliminarEso me pasa por no verificar al momento y confiar en pruebas ralizadas en versiones anteriores.
Un saludo
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.
ResponderEliminarNo 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.
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?
ResponderEliminarHola Isaac
EliminarNo 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
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
ResponderEliminarPersonalmente me decanto por 2, según el caso.
EliminarSi 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.
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.
EliminarYo 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
ResponderEliminarZoom:1 perdon
ResponderEliminarPara 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