100％页脚宽度有差距

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/