CSS问题：子Div顶部margin失效，margin-top作用于父容器

兄弟，你碰到的是CSS里经典的**外边距折叠（Margin Collapsing）**问题！当父元素和它的第一个子元素的顶部外边距直接相邻（中间没有border、padding、内容隔开）时，这两个外边距会合并成一个，看起来就像是子元素的margin-top“跑到”父元素身上去了，这是CSS的默认规则。

下面给你几种靠谱的解决办法，你可以根据自己的布局需求选：

方法1：给父元素触发BFC（块格式化上下文） #

给父元素添加overflow: auto（或者hidden/scroll，只要能触发BFC就行），这样父元素会形成独立的布局上下文，外边距就不会和子元素折叠了：

#rules-panel { 
  background-color:blue; 
  width:80%; 
  margin:0 auto; 
  height:800px; 
  overflow: auto; /* 关键代码：触发BFC */
}
#rules-panel .box { 
  margin:20px; 
  background-color:red; 
}

方法2：用父元素的padding或border隔开外边距 #

如果不想用BFC，也可以给父元素加个顶部的padding或者透明border，让父子元素的外边距不直接相邻：

/* 用padding的方式 */
#rules-panel { 
  background-color:blue; 
  width:80%; 
  margin:0 auto; 
  height:800px; 
  padding-top: 20px; /* 用padding替代子元素的margin-top */
  box-sizing: border-box; /* 可选，防止padding增加父元素总高度 */
}
#rules-panel .box { 
  margin:20px; 
  margin-top: 0; /* 去掉子元素的顶部外边距 */
  background-color:red; 
}

/* 或者用border的方式 */
#rules-panel { 
  background-color:blue; 
  width:80%; 
  margin:0 auto; 
  height:800px; 
  border-top: 1px solid transparent; /* 透明border隔开外边距 */
}

方法3：改用Flex布局 #

把父元素设置为Flex容器，Flex布局默认不会产生外边距折叠的问题，还能顺便实现很多灵活的布局：

#rules-panel { 
  background-color:blue; 
  width:80%; 
  margin:0 auto; 
  height:800px; 
  display: flex;
  flex-direction: column; /* 保持垂直布局 */
}
#rules-panel .box { 
  margin:20px; 
  background-color:red; 
}

这些方法都能解决你的问题，挑个最适合你当前布局的就行！

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