css - 页面顶部和底部不需要的小空间

Question

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

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>

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

经过一些回答后我发现 margin: 0; body css 去掉了顶部的空间。不过我的底部仍然有同样的空间。

向人们展示我的意思:

现在这是解决方法:

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;
}

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

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

Answer 1

将此添加到您的 CSS:

* {
margin: 0;
padding: 0; }