¿Cómo elimino la visibilidad de espacios entre elementos en línea?

Decir que tengo varias etiquetas div inline-block, al igual que esta imagen Clase¿Cómo elimino la visibilidad de espacios entre elementos en línea?

<div class="image"> 

</div> 
<div class="image"> 

</div>

simplemente establece su tamaño a 100x100 y un color de fondo gris. Su margen y sus bordes están configurados en 0, y aún hay espacio entre los dos rectángulos.

Si escribo el código HTML como este, sin embargo:

<div class="image"> 

</div><div class="image"> 

</div>

Extracción de todos los espacios entre los divs, el espacio desaparece.

Como no quiero escribir mi HTML así, estoy pensando que debe haber una manera de eliminar espacios en blanco usando CSS. No me importa si el espacio en blanco se elimina, se oculta o se reduce de tamaño, siempre que se elimine la visibilidad.

Gracias por cualquier ayuda

Conforme a lo solicitado, jsFiddle: http://jsfiddle.net/6h3Jx/

actualiza con word-spacing: http://jsfiddle.net/6h3Jx/1/

Fuente

2011-01-18 Hubro

Esto es raro, ¿tiene un ejemplo en vivo? Además, ¿en qué navegador estás probando? – Kyle

no debería suceder de la manera que dijiste ... puedes hacer un ejemplo jsfiddle – kobe

Pregunta actualizada con el enlace JSFiddle – Hubro

es un comportamiento de elemento en línea, así que intente flotar a la izquierda. http://jsfiddle.net/aVrSx/

Fuente

2011-01-18 10:28:18

No puedo flotar a la izquierda y centrar un elemento. Al menos no he descubierto cómo, ¿alguna idea? – Hubro

¿quieres estos elementos centrados en un contenedor? –

Quiero que estén centrados, y pasar a la siguiente línea si los elementos exceden el ancho del contenedor. Una tarea perfecta para inline-block :) – Hubro

poner lo siguiente en un elemento principal:

word-spacing:-4px;

o tratar de:

font-size:0px;

podría funcionar aún mejor, ya que no se verá afectado por el cambio de tamaño de texto.

Fuente

2011-01-18 09:10:58 Ivan

Eso no hizo absolutamente nada :-) – Hubro

sí, olvidé ese espaciado de palabras: 0; es el valor predeterminado. -4px debería hacer el truco. Sin embargo, esto se verá afectado por el cambio de tamaño del texto, por lo que he agregado una segunda solución a mi respuesta. – Ivan

También hay un valor que dificultaría el tamaño de fuente: 0px; de ser heredado en la jerarquía? EDITAR: No importa, la solución de tamaño de fuente no funciona: http://jsfiddle.net/6h3Jx/1/ – Hubro

puede configurar "display: flex;" atribuir a su contenedor primario:

.flexbox { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}

Fuente

2014-02-05 15:51:06 user2711081

¿Cómo elimino la visibilidad de espacios entre elementos en línea?

Respuesta

Cuestiones relacionadas