页脚和子图像之间不需要的空间

我已经搜索了很多类似的主题并尝试了很多方法，但仍无法解决此问题。页脚底部边界与图像底部边界之间存在不必要的空间。如果我将图像更改为显示：块，该空间将消失。但我无法解释这个问题是如何发生的？谢谢。由于新帐户，我无法显示任何图像。页脚和子图像之间不需要的空间

HTML：

<html> 
<body> 
    <div id="wrapperMain"> 
     <footer> 
      <img src="ico/square-facebook.svg" 
      /><img src="ico/square-twitter.svg" 
      /><img src="ico/square-google-plus.svg"/> 
     </footer> 
    </div> 
</body> 
</html>

CSS：

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height:100%; 
} 

#wrapperMain { 
    position:relative; 
    min-height:100%; 
} 

footer { 
    position:absolute; 
    width:100%; 
    bottom:0; 
    background:#eeeeee; 
    text-align:center; 
}

来源

2015-05-09 Ryan Vu

可以看到在这个空间http://i.imgur.com/nO6TJP7.jpg –

_“如果我改变图像要显示：块，该空间将消失。但是我无法解释这个问题是如何发生的？“ - 因为没有'display：block'，图像与_line box_的（潜在）文本内容的_baseline_对齐。 – CBroe

谢谢。非常清楚。 –

这是因为字体大小的。尝试将font-size: 0;添加到您的footer请参阅下面的演示。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
html, body { 
 
    height:100%; 
 
} 
 

 
#wrapperMain { 
 
    position:relative; 
 
    min-height:100%; 
 
} 
 

 
footer { 
 
    position:absolute; 
 
    width:100%; 
 
    bottom:0; 
 
    background:#eeeeee; 
 
    text-align:center; 
 
    font-size: 0; 
 
}

<div id="wrapperMain"> 
 
     <footer> 
 
      <img src="http://placehold.it/32x32" 
 
      /><img src="http://placehold.it/32x32" 
 
      /><img src="http://placehold.it/32x32"/> 
 
     </footer> 
 
    </div>

备选方案：

添加vertical-align:bottom;到img

例如：img{ vertical-align:bottom; }

使用line-height: 0代替font-size: 0

来源

2015-05-09 18:39:57

你可以玩弄字体大小，尝试不同的大小来证明它确实是因为它。 :) –

该图像的默认显示是'display：inline'，我认为由于默认的'vertical-align：baseline'会留空间。还有一些其他的方法。我会更新我的答案。对不起，但我不确定为什么。 –

谢谢。我认为你说的理由是对的。除此之外，我们可以在'footer'中添加'line-height：0' –

尝试在页脚使用margin: 0px;或更改bottom:0到bottom: 0px;

来源

2015-05-09 18:38:10 UnKnown

我尝试过使用多余的网页浏览器，但是仍然发生这种问题，我曾多次使用margin和padding进行填充。将px添加到0值也不起作用。谢谢。 –

页脚和子图像之间不需要的空间

回答

相关问题