¿Por qué los espacios pequeños siguen apareciendo en mis páginas web?

Question

Esta podría ser una pregunta estúpida, pero si hay una manera mejor o adecuada de hacerlo, me encantaría aprenderla.

Me he encontrado con esto varias veces, incluso recientemente, donde aparecen espacios pequeños en la versión renderizada de mi página HTML. Intuitivamente, creo que estos no deberían estar allí porque fuera del texto o las entidades, el formato del HTML de una página no debería importar, pero aparentemente sí.

A lo que me refiero es a esto: tengo un archivo de Photoshop del cliente sobre cómo quieren que se vea su sitio. Quieren que se vea básicamente píxel perfecto para la imagen en este archivo.

Uno de los lugares en la página requiere una barra de menú, donde cada uno hace el cambio en el desplazamiento, actúa como un hipervínculo, etc. En el archivo de Photoshop esta es una barra larga, por lo que es una forma fácil y económica de hacer esto es simplemente dividir ese segmento en varias imágenes y luego colocarlas una al lado de la otra en el archivo.

Así que instintivamente lo expongo así (hay más, pero esta es la esencia)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

y así sucesivamente.

El problema es que las imágenes tienen este pequeño espacio entre ellas que es inaceptable ya que el cliente quiere que esto sea perfecto en píxeles (y simplemente se ve mal).

Una forma de hacer que se procese correctamente es eliminar los retornos de carro entre las imágenes

<*>

Lo que hace que las imágenes se enfrenten entre sí (el efecto deseado) pero hace que la línea sea increíblemente larga y el código sea más difícil de mantener (se ajusta aquí en SO y esta es una versión simplificada: la real tiene más tiempo) nombres de archivo y JavaScript espolvoreados para hacer el desplazamiento).

Me parece que esto no debería suceder, pero parece que el retorno de carro en el HTML se representa como un pequeño espacio vacío. Y esto sucede en todos los navegadores, parece.

¿Estoy en lo cierto o equivocado al pensar que los dos fragmentos de arriba deberían representar lo mismo? ¿Y hay algo que estoy haciendo mal? ¿Quizás guardar el archivo con la codificación incorrecta? ¿Debería hacer de cada uno de estos enlaces un elemento CSS perfectamente posicionado?

Answer 1

El espacio en blanco (retorno de carro incluido) generalmente se representa como espacio en todos los navegadores.

Necesitas poner los elementos uno tras otro, pero puedes usar un truco:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Esto también se ve un poco feo, pero sigue siendo mejor que una sola línea. Puede cambiar el formato, pero la idea es agregar retornos de carro dentro de los elementos y no entre ellos.

Answer 2

No sé si esto es lo suficientemente general para su página, pero podría clasificar estas etiquetas a particulares y colocarlas flotantes a la izquierda, luego se agruparán sin importar cómo sea su HTML formateado

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Answer 3

Eso es parte de la especificación HTML: los espacios están en el marcado, por lo que se consideran parte del documento.

Las únicas otras opciones que tiene, ya que no le gusta el formato, es romper las etiquetas html:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

que es indeseable en mi opinión, o crea el html dinámicamente, ya sea a través de JavaScript o usando un sistema de plantillas y html dinámico.

Answer 4

La razón es simple: en HTML el espacio en blanco es importante, pero solo una vez. Se ignora el espacio en blanco repetido, solo se muestra el primero.

La única forma confiable de evitar esto es, como lo hizo, sin poner espacios en blanco entre los elementos.

Cuando el diseño basado en la tabla sería menor de lo que es actualmente, puede usar una tabla de relleno cero con borde cero para alinear sus elementos mientras los tiene en líneas separadas en el código fuente.

Answer 5

La forma en que manejo esto es usar una lista desordenada y hacer que cada imagen / enlace sea un elemento. Luego use CSS para mostrar cada elemento en línea y flotarlos a la izquierda.

Esto le dará mucha más flexibilidad y hará que el marcado sea muy legible.

Answer 6

El comportamiento que demostró anteriormente es cierto ya que el navegador trata los retornos de carro como un espacio. Para solucionarlo, puede darle un estilo similar con:

a { display: block; float: left; }

Tenga en cuenta que la regla anterior se aplica a todos los enlaces, por lo que es posible que desee limitar el selector solo a ciertos elementos, es decir:

#nav a { display: block; float: left; }

Answer 7

Si va a hacer una interfaz con pestañas en un sitio web, haga un gran esfuerzo para hacerlo correctamente, y valdrá la pena. Hay muchos sitios web con excelentes ejemplos de implementaciones de pestañas CSS. Considere usar uno de ellos.

Este tiene muchas pestañas CSS + Javascript / AJAX. O vea este conjunto de ejemplos simples de CSS (algunos con estilo). Finalmente, vea este generador de pestañas .

realmente genial