html - HTML/CSS 中的填充和链接问题

Question

我是 HTML 和 CSS 的新手。我有一排链接到各自页面的社交媒体图标。的 HTML:

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

这是相关的 CSS:

#social {
    text-align: center;
}

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

问题是右填充的 20px 是链接的一部分，这是草率的。如何在不链接该空间的情况下在图标之间创建空间？干杯。

Answer 1

只需在 a 元素上设置边距(最后一个元素除外，其中边距既多余又可能影响布局):

#social {
    text-align: center;
}

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