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

时间:2012-08-06 13:13:31

标签: html css

Before-image

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

After-image

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

我无法找到导致页面底部出现神秘附加间隙的问题。忽略黑色边框 - 我用它来检查页脚文本图像的边距。

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> 

1 个答案:

答案 0 :(得分:1)

你能发布你的HTML&amp; CSS代码?我想到的一个快速解决方案是div#footer { box-sizing: border-box; },但显示您已有的内容将有助于您获得更好的答案。