100％页脚宽度有Gap

Question

我的页脚似乎有一个问题，我的页脚增长到100％的页面宽度。目前，当它扩展时，页脚的每一侧都有一个间隙。我尝试将页脚放在包装器外面并在里面，几乎得到相同的结果。我附上了我的代码，看看是否有人能发现我做错了什么。

<div id="wrapper"> <!--Begin Wrapper -->

<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>

<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>

<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>

<hr />

<div id="contentwrap">
<div id="content"></div>
</div>

<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>

</div> <!--End Wrapper -->

body {
    background: #f7f6f6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
#wrapper {
    width: 100%
}
#riaandoviwrap {
    width: 300px;
    min-height: 150px;
}
#riaandovi {
    font-family: Script;
    font-size: 75px;
}
#slideshowwrap {
    width: 950px;
    background: url(../images/slider-bg2.png);
    clear: both;
}
#slideshow {
    min-height: 350px
}
#slideswrap {
    width: 950px;
    min-height: 100px;
    background: #09F;
    margin-top: 6px;
    clear: both;
}
#slide1 {
    width: 300px;
    float: left;
}
#slide2 {
    width: 300px;
    float: left;
}
#slide3 {
    width: 300px;
    float: left;
}
#contentwrap {

}
#content {

}
#footerwrap {
    min-height: 105px;
    background: url(../images/footer-bg.png);
    margin: 0px;
}
#footerleft {
    width: 350px;
    float: left;
}
#footerright {
    width: 350px;
    float: left;
}
hr {
    max-width: 950px
}
img {
    border: 5px solid #FFF
}

Answer 1

将body标签的填充和边距设置为零。虽然你没有手动设置，浏览器确实有默认的填充/边距。

Answer 2

在文档中包含重置工作表以重置所有这些默认样式。推荐Eric Meyer的更完整：

http://meyerweb.com/eric/tools/css/reset/