外边距溢出

发表于 更新于 分类于

成因

父元素 div 未设置边框
第一个子元素设置了上外边距（margin-top: 10rem;）或者 最后一个子元素设置了下外边距（margin-bottom: 10rem;）
导致父元素与子元素一起发生相应的偏移的现象，即为：外边距溢出现象

解决方法

为父元素增加伪元素（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
/* 设置外边距的元素不与父元素直接接触既不会一起发生偏移 */
/* 而父元素前或后添加的伪元素子元素 content 为空，所以不会出现不希望看到的效果 */
/* 上外边距溢出 */
.parent-clear::before {
  content: "";
  display: table;
}
/* 下外边距溢出 */
.parent-clear::after {
  content: "";
  display: table;
}