subrayado entre dos imágenes-enlaces

Question

Tengo el siguiente código HTML dentro de un div:

<a href="http://www.mysql.com"> 
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/> 
</a> 
<a href="http://www.php.net"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/> 
</a> 

que se traduce en la siguiente salida con un guión !? entre ellos:

Si utilizo sólo un enlace de imagen desaparece el subrayado.

¿Por qué ocurre esto y cómo puedo deshacerme del guión bajo?

Answer 1

El subrayado es uno o más caracteres de espacio subrayados. La solución es eliminar todo lo que pueda tomarse como un espacio dentro de un elemento a, como un salto de línea. Un salto de línea y otra whitespaceinside una etiqueta (entre < y >) es OK, aunque:

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
    alt="PHP powered" border="0" title="PHP" /></a> 
<a href="http://www.php.net"><img src="images/mysql-power.jpg" 
    alt="MySQL powered" border="0" title="MySQL"/ ></a> 

Esto significa que todavía hay un salto de línea entre los a elementos, y los navegadores generalmente tratan como un espacio. En este caso, esto probablemente no importe, ya que el espacio está fuera de los elementos a y, por lo tanto, no estará subrayado; solo causa un poco de espacio. Pero para hacer que las imágenes se separen más claramente, considere agregar padding-left en el segundo elemento a.

Answer 2

El 'guión bajo' es de hecho el subrayado de la etiqueta 'a'. Es un estilo aplicado por los navegadores para indicar un hipervínculo. Para deshacerse del subrayado pero conservar el hipervínculo, escriba la etiqueta 'a'.

a{text-decoration:none;} 

es probable que tenga otros enlaces en la página también, así que es una buena idea dar a estos enlaces una clase para que puedan ser de estilo por separado.

<a class="imageLink" href="http://www.mysql.com"> 
    <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/> 
</a> 
<a class="imageLink" href="http://www.php.net"> 
    <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/> 
</a> 

y luego hacer algo como esto:

a.imageLink{ 
    text-decoration:none; 
} 

Como alternativa, puede utilizar los estilos en línea:

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com"> 

Disculpas si ya lo sabe y parece obvia, sólo quería para dar una respuesta clara. :)

Answer 3

Elimine el espacio en blanco entre las etiquetas de inicio y final de los anclajes y las imágenes que contienen.

Answer 4

puede quitar la decoración de texto mediante el siguiente CSS

a 
{ 
text-decoration: none; 
} 

o puede quitar el espacio en blanco entre la imagen y las etiquetas de anclaje.

Ambos solucionar el problema

Answer 5

Eliminar text-decoration para esas etiquetas a es suficiente, no es necesario reducir la legibilidad de su marcado mediante la eliminación de líneas nuevas y sangrías.

Pero recuerde para eliminar ese estilo de hover también:

a, a:hover 
{ 
    text-decoration: none; 
}