Html 为什么我的页脚徽标包括页边空白？_Html_Css

Html 为什么我的页脚徽标包括页边空白？

html css

Html 为什么我的页脚徽标包括页边空白？,html,css,Html,Css,我遇到了一个关于我的页脚上的徽标的问题。我的页脚有四个徽标（一个Pinterest徽标、一个Facebook徽标、一个Twitter徽标和一个Google+徽标）。四个徽标都链接到单独的网页，但是，我不明白为什么徽标之间的空白（左边距：15px）也可以点击。如果有人能解释为什么会发生这种情况，以及我如何着手解决这个问题（只需点击徽标即可访问链接，而不是中间的空白），我将不胜感激。先谢谢你以下是相关的HTML代码： <body> <div id="footer"&g

我遇到了一个关于我的页脚上的徽标的问题。我的页脚有四个徽标（一个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>

这里是一个只包含相关HTML和CSS的JSFIDLE链接：

，因为您可以单击的元素是

img

，它的左边距为

15px

。

-标记中包含的所有内容都可以单击。这是预期的行为

在你的情况下，你不会这么做。因此，您应该将

边距向左移动：15px

远离

#footelogos img

，而是移动到

#footelogos a

#footerlogos a {
     margin-left: 15px; 
}

#footerlogos img {
     opacity: 0.6; 
     vertical-align: middle; 
}

因为您的可点击元素是

img

，它的左边距为

15px

。

-标记中包含的所有内容都可以单击。这是预期的行为

在你的情况下，你不会这么做。因此，您应该将

边距向左移动：15px

远离

#footelogos img

，而是移动到

#footelogos a

#footerlogos a {
     margin-left: 15px; 
}

#footerlogos img {
     opacity: 0.6; 
     vertical-align: middle; 
}

在你的JSFiddle上不适合我在你的JSFiddle上不适合我在你的JSFiddle上不适合我