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

Question

Esto podría ser una pregunta estúpida, pero si hay una forma mejor o más adecuada para hacer esto, me encantaría aprenderlo.

me he encontrado con esto unas cuantas veces, incluyendo recientemente, donde los espacios pequeños aparecen 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í.

lo que me refiero es a esto - Tengo un poco de Photoshop archivo desde el cliente en la forma en que quieren que su sitio para mirar. Quieren que se vea básicamente como un 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 bit cambiante al pasar el mouse, actúa como un hipervínculo, etc. En el archivo Photoshop esta es una barra larga, por lo que es barata y fácil hacer esto es simplemente dividir ese segmento en múltiples imágenes y luego colocarlas una al lado de la otra en el archivo.

Así instintivamente sentar a cabo al igual que (no hay más que eso, pero esto es lo esencial)

<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 ellos que es inaceptable, ya que el cliente quiere esta cosa píxel perfecto (y que simplemente se ve mal).

Una forma de conseguir que se procesa de forma adecuada es eliminar los retornos de carro entre las imágenes

<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> 

lo que hace que las imágenes van bien uno contra el otro (el efecto deseado), pero hace que la línea increíblemente largo y el código más difícil de mantener (se ajusta aquí en SO y esta es una versión simplificada, la real tiene nombres de archivo más largos y JavaScript rociado para hacer el vuelo).

Me parece que esto no debería ocurrir, 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.

¿Tengo razón o estoy equivocado al pensar que los dos fragmentos anteriores deberían representar lo mismo? ¿Y hay algo que estoy haciendo mal? ¿Tal vez guardar el archivo con la codificación incorrecta? ¿Debo 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.

Es necesario poner los elementos uno tras otro, pero se puede utilizar 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

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

Las únicas opciones que tienes, 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 crear el código HTML de forma dinámica - ya sea a través de JavaScript o usando un sistema de plantillas y html dinámico.

Answer 3

No sé si esto es lo suficientemente general para su página, pero se podía clases particulares estos un etiquetas y flotar los dejó a todos, entonces van a agruparse no importa cómo se formatea el código HTML.

<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 4

El motivo es simple: en el espacio en blanco HTML importa, pero solo una vez. El espacio en blanco repetido se ignora, solo se muestra el primero.

La única manera confiable de evitar esto es, como lo hiciste, al no poner espacios en blanco entre los elementos.

Cuando el diseño basado en tablas fuera menor que en la actualidad, podría usar una tabla de relleno con cero bordes cero para alinear sus elementos mientras los tiene en líneas separadas en el código fuente.

Answer 5

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

tiene muchas pestañas CSS + Javascript/AJAX. O vea this set of simple CSS examples (un poco de estilo). Por último, mira esto tabs generator realmente muy bonito.

Answer 6

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

a { display: block; float: left; } 

Tenga en cuenta que la regla anterior se aplica a todos los enlaces, así que sería bueno para reducir el selector a ciertos elementos solamente, es decir:

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

Answer 7

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 hacia la izquierda.

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