CODEWITHSUNDEEP
htmlcsshyperlink
kalenpw
kalenpw

Reputation: 695

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

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. enter image description here

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;
}

Upvotes: 1

Views: 214

Answers (3)

Zubair sadiq
Zubair sadiq

Reputation: 500

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

Upvotes: 2

Luke P. Issac
Luke P. Issac

Reputation: 1591

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.

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6827

use normalize css or try this 

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

Upvotes: 0

Related Questions