Cuando coloca una imagen dentro de la etiqueta de enlace (entre y), el navegador del visitante dibuja de forma predeterminada un borde azul de un píxel de ancho alrededor de la imagen. Además del hecho de que la arbitrariedad del navegador aumenta el tamaño de este elemento de diseño de su página en dos píxeles verticalmente y dos píxeles horizontalmente, es posible que el color azul no coincida con el esquema de color del diseño de la página.
Instrucciones
Paso 1
Si necesita eliminar el borde de una o más imágenes de enlace, puede hacerlo agregando un atributo de borde con un valor cero a la etiqueta de cada una de las imágenes que necesita. Por ejemplo: Se puede lograr el mismo efecto usando el atributo de estilo colocando el mismo borde con un valor cero en él: El valor cero (0px) en esta variante se puede reemplazar con el valor "ninguno" (sin comillas).
Paso 2
Si necesita resolver este problema de manera radical, es decir, para todas las imágenes con enlaces en todo el documento, entonces es mejor hacerlo de manera diferente. No es necesario agregar el atributo correspondiente a la etiqueta de cada imagen por separado, es más fácil escribir la regla común a todos en la descripción de estilo al comienzo del documento. Esta regla CSS se verá así: a img {border: none;} Debe colocarse en el bloque de descripción de estilo, y el bloque en sí debe colocarse antes de la etiqueta que cierra el título de la página:
a img {borde: ninguno;}
Paso 3
No solo las imágenes, sino también los enlaces de texto simple en algunos tipos de navegadores tienen un problema similar: si un visitante hace clic en el enlace, quedará un borde punteado a su alrededor. Para salvar su página de este error de diseño, agregue la siguiente regla de enlace a las descripciones de estilo:
a img {esquema: ninguno;}
