页面顶部和底部的小空间

时间:2013-06-23 04:27:21

标签: css html

我有一个很可能是简单的问题。 我的页面有一个背景颜色,包含一个容器,然后是一个内容容器,用于将页面放在中间。现在这个内容容器有不同的背景颜色,但是在我们看到原始页面背景颜色的小空间在顶部和底部可见。

CSS文件是这样的:

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #E0EBED;
}
#container {
    width: 100%;
}

#contentcontainer {
    background-color: #FFFFFF;
    width: 1000px;
    margin: 0 auto;
}

身体看起来像这样:

<div id="container">
        <div id="contentcontainer">
        <p>Some content</p>
        </div>
</div>

我需要做些什么才能让这个小空间消失。 我已经尝试将0个顶部填充添加到容器div和body。

经过几个答案,我发现了保证金:0;身体css取出顶部的空间。我的底部仍然有相同的空间。

向人们展示我的意思: bottom screenshot

现在这是固定的:

CSS:

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #E0EBED;
    margin: 0;
}
#container {
    width: 100%;
}

#contentcontainer {
    background-color: #FFFFFF;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}

我将 margin:0; 添加到body, height:100%; 添加到内容容器。如果您遇到同样的问题,请不要忘记将 margin:0; 添加到正文中,因为如果没有它,它将无法正常工作。

感谢所有回答这个问题并帮助我解决这个问题!

2 个答案:

答案 0 :(得分:1)

将此添加到您的CSS:

* {
margin: 0;
padding: 0; }

答案 1 :(得分:0)

默认情况下,body有填充。将其设为0px -

body{padding:0px;}