html - 添加另一个图像后的额外间隙

Question

这是在我为页脚添加文本之前。页脚图像很好地靠在页面底部。

这是在我为页脚添加文本之后。

我找不到导致页面底部出现神秘额外空白的问题。忽略黑色边框 - 我用它来检查页脚文本图像的边距。

CSS：

* {
    margin: 0;
    padding:0;
}



body {
    background-image: url('images/BG-W1.png');
}
#container{
    max-width:1000px;
    margin: 0 auto; 
    position: relative; 
    padding: 0 auto;
    height: 790px;
    border: 2px solid blue;

}

#footerBg {
    position: relative;
    bottom:-63px;
    left:-50px;
}

#footerBg img {
    display: block;
}

#footertex {
    position: relative;
    top:-110px;

    border:2px solid black;

}
footer {
    height: 50px;
} 

#footertex img {
    display: block;
} 

HTML：

<footer>
            <figure id="footerBg">
                <img src="images/BG_F_S3.png" alt="Footer Background" width="" height="" />

            </figure>   

        <<figure id="footertex">    
                    <img src="images/ft1.png" usemap="#green" border="0" />

                    <map name="green">

                    <area shape="rect" coords="513,56,625,106" href="http://www.google.com" />
                    <area shape="rect" coords="725,58,874,108" href="http://www.google.com" />

                    </map>
        </figure>   

        </footer> 

Answer 1

您可以发布您的 HTML 和 CSS 代码吗？想到的一个快速解决方法是，div#footer { box-sizing: border-box; }但显示您已经拥有的内容有望为您提供更好的答案。