CSS中子元素为何影响父元素位置？边距合并问题咨询

问题现象 #

给.container设置哪怕1px的padding时页面显示正常，但将padding设为0px或移除后，.container会向下偏移一段距离，推测是.todo的margin-top导致，但不清楚具体原因。

相关代码 #

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  background: linear-gradient(135deg, rgb(44, 44, 146), rgb(92, 23, 109));
  min-height: 100vh;
  padding: 1px;
}

.todo {
  background-color: white;
  max-width: 550px;
  min-height: 250px;
  border-radius: 10px;
  margin: 100px auto 20px;
}

HTML代码

<div class="container">
  <div class="todo">
  </div>
</div>

原因解析 #

这是CSS中**外边距折叠（Margin Collapse）**的典型表现：当父元素没有设置边框、内边距、overflow属性（非visible），也没有清除浮动时，子元素的上外边距会和父元素的上外边距合并，最终效果是父元素被这个合并后的外边距向下推动，看起来就像父元素自己有了上外边距。

当你给.container添加1px padding时，父元素的内边距阻断了外边距折叠，子元素的margin-top就只会作用于自身和父元素内部的间距，不会影响父元素的位置。

解决方法 #

可以任选一种方式阻断外边距折叠：

• 保留父元素的padding: 1px（你的现有方案）
• 给父元素添加透明边框：border: 1px solid transparent;
• 给父元素设置overflow: hidden;或overflow: auto;
• 给父元素添加伪元素来分隔：

.container::before {
  content: "";
  display: table;
}

• 将子元素的margin-top: 100px替换为父元素的padding-top: 100px

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