HTML/CSS 中的填充和 Link 问题

Question

我是 HTML 和 CSS 的新手。我有一排社交媒体图标 link 到各自的页面。 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和link分开了，很草率。如何在不 space 被 linked 的情况下在图标之间创建 space？干杯。

Answer 1

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

#social {
    text-align: center;
}

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

Answer 2

在锚点之间提供边距

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

Answer 3

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

Answer 4

不要在 css 中定位 #social img，而是尝试使用 #social a 和 margin-right: 20px 而不是 padding-right。

HTML/CSS 中的填充和 Link 问题

Padding and Link Issue in HTML/CSS

html

css

image

padding

hyperlink