HTML/CSS removing little line by link when using embedded image

Question

When I use an img tag inside of an a tag, these little lines at the bottom show up. I've tried several css properties to remove them and couldn't find one that did the trick.

Relevant 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

use normalize css or try this

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

Answer 3

I will suggest to check the image files using any tool like photoshop and see if there is any transparent pixel there for that icon. Also try to keep the dimensions of all the three icon exactly same. If required edit the image accordingly.