使用margin和padding消除容器与footer间距无效的问题

这个空隙是外边距折叠导致的：你的.container内部的段落（<p>）带有默认的底部外边距，这个外边距会穿透容器边界，和下方的footer产生空隙——即便你用全局选择器重置了margin，也可能因为引入的样式（比如col-12类自带的段落样式）覆盖了重置规则。

以下是几种可行的解决方法：

方法1：触发容器的BFC（块级格式化上下文） #

给.container添加overflow: hidden，阻止内部元素的外边距穿透容器：

.container {
  height: 2000px;
  background-color: white;
  overflow: hidden; /* 添加这行 */
}

方法2：直接移除内部段落的外边距 #

如果不需要段落的底部间距，可以直接重置内部<p>的margin：

.container p {
  margin-bottom: 0;
}

方法3：给容器添加底部内边距（替代外边距） #

如果你需要保留段落的间距，可将容器的内边距替代内部元素的外边距：

.container {
  height: 2000px;
  background-color: white;
  padding-bottom: 1rem; /* 按需调整值 */
}
.container p {
  margin-bottom: 0;
}

修改后的完整代码示例 #

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: grey;
  margin: 0;
}

.container {
  height: 2000px;
  background-color: white;
  overflow: hidden; /* 新增 */
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: green;
  color: white;
  text-align: center;
  margin: 0;
}

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>

内容的提问来源于stack exchange，提问作者larry8989