linea - quitar espacios en blanco html

¿Cómo puedo eliminar el espacio entre elementos en línea en CSS?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo elimino el espacio entre los elementos de bloque en línea? 35 respuestas

Tengo un div con un grupo de etiquetas de imagen en el interior, he aquí un ejemplo:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Debido a que hay espacios en blanco entre las etiquetas, los navegadores mostrarán algunos espacios en blanco entre las imágenes (Chrome decide en 4px). ¿Cómo puedo decirle al navegador que NO muestre ningún espacio en blanco entre las imágenes, sin colocar los> y <directamente uno al lado del otro? Sé que el espacio entre letras se aplica además de lo que el navegador decide usar, por lo que es inútil incluso con un valor negativo. Básicamente, estoy buscando algo como Twitter en la parte inferior de su página de inicio. Miré su código y están usando una lista desordenada. Podría simplemente hacer eso, pero me gustaría la explicación técnica de por qué parece que no hay forma de eliminar el espacio en blanco entre estas imágenes.

Answer 1

Agregue style="display:block" a sus etiquetas img .

Answer 2

El espaciado hace que las imágenes se muevan como elementos en línea. Si desea que se acumulen, podría usar la lista desordenada (como lo hace Twitter) ya que esto colocará cada imagen dentro de un elemento de bloque.

Los elementos en línea se muestran en línea con el texto.

Answer 3

La solución más simple que no ensucia con el diseño y preserva el formato del código:

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Answer 4

Parece que usar una tabla es la forma correcta de hacerlo, ya que los espacios en blanco no tienen efecto entre las celdas.

Answer 5

Si está publicando sus páginas con Apache, puede usar el Módulo Google PageSpeed. Esto tiene opciones que puede usar para colapsar espacios en blanco:

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

No tiene que usar las opciones más ''peligrosas'' de PageSpeed.

También vea las respuestas en esta pregunta sobre cómo eliminar espacios en blanco en CSS:

Ignorar espacios en blanco en HTML

Answer 6

Si por alguna razón quieres hacerlo:

• sin usar float , y;
• sin colapsar el espacio en blanco en su HTML (que es la solución más fácil, y por lo que vale, lo que Twitter está haciendo)

Puede usar la solución desde aquí:

¿Cómo eliminar el espacio entre los elementos de bloque en línea?

Lo he refinado un poco desde entonces.

Ver: http://jsfiddle.net/JVd7G/

letter-spacing: -1px es para arreglar Safari.

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>

Answer 7

También puede hacer que todos los anclajes floten a la izquierda y establezcan margin-left a -1

Answer 8

intente agregar img {margin:0;padding:0;float:left}

en otras palabras, elimine cualquier margin predeterminado y padding de los navegadores para img y float .

Demostración: http://jsfiddle.net/PZPbJ/