Nueva línea entre anclajes en fuente HTML crea un espacio vacío en el navegador

Question

Duplicar posibles:
How do I remove the visibility of spaces between inline elements?

lo general formato a mi código fuente para ser leído fácilmente por los seres humanos, los navegadores que yo sepa eliminar cualquier \n\t caracteres de la fuente, por lo que no entran en el html representado.

Hoy construí un menú que tenía unos pocos píxeles entre 2 anclajes en el html renderizado y no pude encontrar el origen de ese espacio "vacío" en CSS/HTML. Después de unas horas, elimino la nueva línea (\n) entre los 2 anclajes de la fuente (por si acaso) y el espacio vacío desapareció.

Creé un violín here.

El primer elemento del menú tiene los anclajes en la misma línea en el código fuente, los otros 2 elementos del menú tienen una nueva línea entre los anclajes. (desplaza el elemento de menú para ver de lo que estoy hablando). Tengo el mismo comportamiento en Firefox 8.0, Firefox Nightly 11.0a1 (2011-12-01) y Chromium 14.0.835.202 (Desarrollador Build 103287 Linux) Ubuntu 11.10.

Simplemente no puedo entender por qué sucede esto.

¿Qué hice mal y cómo puedo evitar este comportamiento (sin cambiar la legibilidad del código fuente)?

Answer 1

Los anclajes son elementos en línea. Si agrega un espacio en blanco (espacio, pestaña, nueva línea, ...) entre los elementos, aparecerá un espacio.

Dependiendo de la situación, puede utilizar cualquiera de los métodos siguientes para deshacerse de la brecha:

• Añadir un negativo margin-left, por ejemplo, margin-left:-4px;
• Use float, p. float:left;

• Elimina los espacios en blanco entre los elementos. Para mantener el código legible por tanto, se puede romper después de la etiqueta de apertura, por ejemplo:

  <a href="..">Link</a><a 
      href="..">Link 2</a>