无法删除页面底部的空间

Question

我遇到一个奇怪的问题，在我的页脚和页面底部之间有48px的非边距/填充（我还注意到如果我从DOM中删除页脚） ，空间仍然在下一个元素下面。）

当我将背景颜色应用到body（图中的黄色）时，我才注意到它。我还使用了规范化样式表，并尝试强制页脚上的margin-bottom无效。

基本结构：

<footer>
  <section>
  </section>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</footer>

相关CSS：

* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 16px;
}

body {
    width: 100%;
    background-color: #fefde1;
    line-height: 1.5;
    color: #656565;
    position: relative;
}

footer {
    margin-bottom: 0 !important;
    padding-bottom: 60px;
    width: 100%;
    background-color: #fff;
    font-size: 1rem;
}

Answer 1

我只能想到三件事：

1：身体有一个你没有注意到的边缘或填充物。

2：身体里面有一些边缘或边框。

3：添加“margin-bottom：-48px;”在页脚中。 （这很快又很脏）

Answer 2

如果它可以帮助其他任何人，问题就是跟踪像素脚本，尽管height为0，但却为DOM添加了空间。

Answer 3

也许你应该添加一些重置样式。检查导航器检查器并选择这些属性，默认情况下会看到一些“继承样式”。

尝试将此添加到您的体型：

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box

}