奇怪的页脚边距答案

【问题标题】：Weird margin on footer奇怪的页脚边距
【发布时间】：2014-02-10 06:44:18
【问题描述】：

我的主页上有一个页脚，奇怪的是它周围没有明显的原因（至少在我看来）。我只想要一个非常类似于此页面上的页脚。只是一个 100% 宽度的普通页脚。问题是（正如您希望在我提供的图片中看到的那样），左侧、右侧和底部有大约 9px 的边距。

这里是 CSS：

#footer_container{

    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

HTML

<body>
</body>
<div id="footer_container">
</div>

这就是它的样子：

【问题讨论】：

为什么你的页脚在你的身体之外？？？
你确定你删除了正文的边距吗？ body { margin: 0; } 你能在 jsfiddle 中重现它吗？
您还需要将页脚的position 定义为absolute 或relative。

标签： html css footer sticky-footer

【解决方案1】：

为 HTML 正文添加 CSS 规则：

body {
    padding: 0;
    margin: 0;
}

你的body 应该是这样的（div 在body 中）：

<body>
    <div id="footer_container">
    </div>
</body>

【讨论】：

默认情况下，body 似乎有一个填充/边距。非常感谢！

【解决方案2】：

这里有两个问题，你的页脚在你的身体之外：

<body>
  <div id="footer_container">
  </div>
</body>

而且你需要去掉 body 上的边距，那么 width:100% 就可以了

body {
    margin:0;
}
#footer_container{

    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

我已将其添加到 JSfiddle，以便您可以看到它正在工作。

附带说明：如果您的页脚出于某种原因故意在正文之外，我强烈建议您更改此设置以确保兼容性和 SEO 因素我确信会受到影响

【讨论】：