无法删除页面底部的空间

时间:2017-04-22 14:17:12

标签: css

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

enter image description here

当我将背景颜色应用到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;
}

3 个答案:

答案 0 :(得分:0)

我只能想到三件事:

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

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

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

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

}