HTML - HREF creates a new blue line under the image

Question

When adding href to a image I see a blue line created underneath the image. Any idea what its called and how to remove that?

Here is a screenshot of the image.

Blue line under the image

Here is the html code:

<html>

<style>

div{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 400px;
   height: 300px;
   margin-top: -150px;
   margin-left: -200px;

}

</style>

<div>
  <a href="https://10.10.10.10/zabbix">
  <img src="https://miro.medium.com/max/800/1*clU7swMwpx_-jFxwExcCOg.png" width="190">
  </a>


  <a href="https://10.10.10.10/grafana">
  <img src="https://logodix.com/logo/1736625.png" width="190" >
  </a>
</div>

</html>

The CSS answer provided is good, but you could also try removing the whitespace between the elements (so it's `` without newlines) — freefaller, Dec 10 '19 at 12:05

score 2 · Accepted Answer · answered Dec 10 '19 at 12:01

2

The underline is set on the text-decoration property of the "a" element. So setting it to "none" should disable it:

a {
  text-decoration: none;
}

answered Dec 10 '19 at 12:01

LordNeo

1,195
1
8
21

Or just remove the whitespace – mplungjan Dec 10 '19 at 12:06

HTML - HREF creates a new blue line under the image

1 Answers1