Question

我遇到了有关我的页脚中的徽标的问题。我的页脚中有四个徽标（Pinterest徽标，Facebook徽标，Twitter徽标和Google+徽标）。四个徽标中的每一个都链接到单独的网页，但是，我无法理解为什么也可以点击徽标之间的空白区域（边距：15px）。如果有人能够解释为什么会发生这种情况以及如何解决这个问题（只需要点击徽标来访问链接，而不是中间的空白区域），我们将非常感激。先感谢您。

以下是相关的HTML代码：

<body> 
     <div id="footer"> 
         <div id="footerlogos"> 
             <a href="https://www.pinterest.com/fwtemplates/" target="_blank">
                 <img src="http://s8.postimg.org/9rkvn5myp/pinteresticon.png" alt="pinterest icon" height="22px"/>
             </a>
             <a href="https://www.facebook.com/freewebsitetemplates" target="_blank">
                 <img src="http://s1.postimg.org/xbrb5tse3/facebookicon.png" alt="facebook icon" height="22px"/>
             </a>
             <a href="https://twitter.com/fwtemplates" target="_blank">
                 <img src="http://s10.postimg.org/z4hzkw8xh/twittericon.png" alt="twitter icon" height="22px"/>
             </a>
             <a href="https://plus.google.com/118363260425872001433" target="_blank">
                 <img src="http://s2.postimg.org/63vc1sv8l/google_icon.png" alt="google+ icon" height="22px"/>
             </a>
         </div> 
     </div> 
</body>

以下是相关的CSS：

#footer {
     width: 100%; 
     height: 50px; 
     background-color: #999999;
     border-bottom: 1px solid black; 
     padding-right: 20px; 
     padding-left: 20px; 
     clear: both; 
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

#footerlogos {
     height: 100%; 
     line-height: 45px; 
     display: inline-block; 
     float: right; 
}

#footerlogos img {
     opacity: 0.6; 
     vertical-align: middle; 
     margin-left: 15px; 
}

#footerlogos a:link {
     text-decoration: none; 
}

以下是JSFiddle的链接，仅包含相关的HTML和CSS：https://jsfiddle.net/kqwm5m45/

Answer 1

因为您的可点击元素是具有img的{{1}}。 margin-left: 15px - 标记中包含的所有内容都是可点击的。这是预期的行为。

在你的情况下，你不会这样。因此，您应该将a从margin-left: 15px移至#footerlogos img。

#footerlogos a

为什么我的页脚徽标包括左边距？

1 个答案: