Gömülü görüntü kullanırken bağlantıyla küçük çizgiyi kaldıran HTML/CSS

Question

Bir etiketin içinde bir img etiketi kullandığımda, alt kısımdaki bu küçük çizgiler görünür. Onları kaldırmak için birkaç css özellikleri denedim ve hile yapan bir tane bulamadım.

İlgili html:

  <a href='https://github.com/'> 
       <img class='ContactLink' src='Images/Icons/GitHub.png' alt='GitHub'> 
      </a> 
      <a href='https://twitter.com/'> 
       <img class='ContactLink' src='Images/Icons/Twitter.png' alt='Twitter'> 
      </a> 
      <img class='ContactLink' src='Images/Icons/Gmail.png' alt='Email'> 

CSS:

.ContactLink{ 
    height: 50px; 
    width: 50px; 
    border: 0; 
} 

Answer 1

///Add this code in CSS file 
a { 
    text-decoration:none; 
} 

Answer 2

kullanım normalize css veya denemek bu

a,a:focus,a:hover,a:active{ 
    text-decoration:none; 
    outline-width: 0; 
} 
img { 
    display:inline-block; 
} 

Answer 3

Ben photoshop gibi herhangi bir aracı kullanarak resim dosyaları kontrol etmek önerir

ve bu simge için orada şeffaf bir piksel olup olmadığını görün. Ayrıca, üç simgenin boyutlarını tam olarak aynı tutmaya çalışın. Gerekirse, resmi uygun şekilde düzenleyin.