删除白色边框页脚

Question

如何去除浏览器底部的白色边框(google chrome)？

这是我用过的代码：

footer {
  color: white;
  width: 101%;
  margin-left: -8px;
  background-color: #343434;
  margin-left: -16px;
  width: 101.5%;
  margin-top: -8px;
  height: 40px;
  z-index: 100;
}

footer > div {
  width: 1000px;
  margin: 0 auto;
}

<main>
    <!--main things-->
</main>

<footer>
    <div>
        <p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright &copy; 2015</p>
    </div>
</footer>

我曾尝试将 margin-button 设置为零，但没有用。我还把 margin-left 设置为 -16px，将 width 设置为 101.5%？为什么？

有人可以帮我吗？
谢谢

Answer 1

您可以尝试将以下内容添加到 <body> 标签中：

<body style="padding: 0; margin: 0;">

或者，创建一个新的 CSS class:

body { 
    padding: 0;
    margin: 0; 
}

如果这不起作用，在 Chrome 中，如果您按 F12，它会调出一个允许您查看元素样式的面板。将鼠标悬停在元素上，直到找到创建空白的元素，然后从中删除 padding/margin。

Answer 2

尝试添加到您的 css

body{
    margin:0;
}

还有一些 css 页脚的清理工作

footer {
  color: white;
  width: 100%;
  background-color: #343434;
  height: 40px;
  z-index: 100;
  bottom:0;
}

footer > div {
  width: 1000px;
  margin: 0 auto;
}

Answer 3

使用这个 HTML:

<body>
 <div id="footer">
  <div id="inner">
   FastCycle werdt gecreerd door HP-programming vzw. Copyright &copy; 2015
  </div>
 </div>
</body>

使用这个CSS:

body {
 margin: 0px;
 padding: 0px;
}

#footer {
 background-color: #343434;
 color: #ffffff;
 height: 40px;
 margin: 0px;
 padding: 0px;
 width: 100%;
}

#inner {
 margin: 0px 0px 0px -500px;
 padding: 0px;
 position: relative;
  left: 50%;
  top: 0px;
 width: 1000px;
}

此外，您已经使用 2 个不同的值设置了两次宽度和左边距，因此您可能想要清理它。不管我的代码给出相同的结果，除了没有白色 space。如果其他元素依赖于它，请随意添加我删除的一些内容。

删除白色边框页脚

remove white border footer

html

css

footer