CODEWITHSUNDEEP
htmlcssimagehyperlinkpadding
freezefry
freezefry

Reputation: 158

Padding and Link Issue in HTML/CSS

I am new to HTML and CSS. I have a row of social media icons that link to their respective pages. The HTML for that:

<div id="social">
        <a target="_blank" href="https://www.facebook.com/">
            <img title="Facebook" alt="Facebook" src="img/social/facebook.png" />
        </a>

        <a target="_blank" href="https://twitter.com/">
            <img title="Twitter" alt="Twitter" src="img/social/twitter.png" />
        </a>

        <a target="_blank" href="https://instagram.com/">
            <img title="Instagram" alt="Instagram" src="img/social/instagram.png" />
        </a>
    </div>

Here is the relevant CSS:

#social {
    text-align: center;
}

#social img {
    width: 6%;
    height: 6%;
    padding-right: 20px;
}

The problem is that the 20px of right padding is apart of the link, which is sloppy. How do I create space between the icons without that space being linked? Cheers.

Upvotes: 0

Views: 71

Answers (4)

Rolland Walsh
Rolland Walsh

Reputation: 11

Instead of targeting #social img in the css, try using #social a and margin-right: 20px instead of padding-right.

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 4503

use margin

#social {
    text-align: center;
    
}

#social img {
    width: 6%;
    height: 6%;
    /*padding-right: 20px;*/
    margin-right: 20px;
}
<div id="social">
        <a target="_blank" href="https://www.facebook.com/">
            <img title="Facebook" alt="Facebook" src="img/social/facebook.png" />
        </a>

        <a target="_blank" href="https://twitter.com/">
            <img title="Twitter" alt="Twitter" src="img/social/twitter.png" />
        </a>

        <a target="_blank" href="https://instagram.com/">
            <img title="Instagram" alt="Instagram" src="img/social/instagram.png" />
        </a>
    </div>

Upvotes: 1

m4n0
m4n0

Reputation: 32275

Provide margin between the anchors

#social a {
  width: 6%;
  height: 6%;
  margin-right: 20px;
}

Upvotes: 1

SW4
SW4

Reputation: 71160

Simply set a margin on the a elements (except the last one, where a margin would be both redundant, and potentially layout impacting):

#social {
    text-align: center;
}

#social img {
    width: 6%;
    height: 6%;
}
#social a:not(:last-of-type){
    margin-right:20px;
}

Upvotes: 2

Related Questions