Question

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

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

Answer 1

这是因为字体大小。尝试将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

Answer 2

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

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

2 个答案: