如何消除两个Div间的间距？已设margin、padding为0

问题根源 #

第二个DIV内的<h1>hi</h1>标签带有浏览器默认的外边距（margin），这个外边距会“溢出”到父DIV之外，从而导致两个DIV之间出现视觉上的间距。你只重置了body、两个DIV以及部分元素的margin/padding，但遗漏了标题标签的默认样式。

修复方案（任选其一即可） #

1. 全局重置所有标题标签的默认边距

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

2. 单独设置目标h1的边距为0

.page--darkmode h1 {
  margin: 0;
}

3. 触发BFC限制内部margin溢出
   给第二个DIV添加overflow: hidden属性，让父容器形成块级格式化上下文，限制内部元素的margin不会超出容器范围：

.page--darkmode {
  margin: 0;
  padding: 0;
  width: auto;
  height: 100vh;
  background-color: #282434;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Will W.