css - 无法删除页面底部的空间

Question

我遇到了一个奇怪的问题，在我的页脚和页面底部之间有 48 像素的非边距/填充(我还注意到，如果我从 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:body里面有东西，有边距或边框。

3: 添加一个“margin-bottom: -48px;”在页脚中。 (这又快又脏)