Question

如何删除浏览器底部的白色边框（谷歌浏览器）？

white border of bottom footer

这是我用过的代码：

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类：

body { 
    padding: 0;
    margin: 0; 
}

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

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个不同的值设置了两次“宽度”和“左边距”，因此您可能希望将其清理干净。无论我的代码是否给出相同的结果，除了没有空格。如果其他元素依赖它，请随意添加一些我已经取出的东西。

删除白色边框页脚

3 个答案: