【问题标题】:Small unwanted space on top and bottom of page页面顶部和底部不需要的小空间
【发布时间】:2013-06-19 21:52:55
【问题描述】:

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

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。

经过几个答案后,我发现 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; 添加到正文中,否则它将无法工作。

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

【问题讨论】:

标签: css html


【解决方案1】:

将此添加到您的 CSS:

* {
margin: 0;
padding: 0; }

【讨论】:

  • 顶部的空间消失了,但底部仍然存在:(
  • 底部是什么意思?你能详细说明一下吗?
  • 页面底部。所以现在整个中间都是白色的,但会停下来,在底部留下大约一行,再次显示身体背景。
  • 我知道这可能不是语义...但你可以试试这个...' :root, body { background: #E0EBED ; }'
  • 哦!使高度为 100% 的内容容器。 '#contentcontainer { 高度:100%; }' 我刚刚在小提琴上试过。
【解决方案2】:

body 默认有填充。将其设为 0px -

body{padding:0px;}

【讨论】:

  • 不幸的是没有效果。
猜你喜欢
  • 1970-01-01
  • 2021-06-03
  • 1970-01-01
  • 2018-09-09
  • 1970-01-01
  • 2020-10-24
  • 1970-01-01
  • 1970-01-01
  • 2020-05-22
相关资源
最近更新 更多