基础计算器开发：screen容器margin-top属性失效问题排查

问题 #

制作基础计算器时，尝试给.screen容器添加margin-top属性，想让它与.main-container顶部拉开距离，但该属性未生效，反而导致整个.main-container下移。单独使用margin属性时，仅margin-left有效。

原因 #

这是**CSS外边距折叠（Margin Collapse）**导致的：当父元素（.main-container）没有设置padding、border，也未触发BFC（块级格式化上下文）时，子元素（.screen）的上外边距会和父元素的上外边距合并，最终表现为父元素被下移，而非子元素在父元素内下移。

解决方案 #

以下几种方法都能解决这个问题，任选其一即可：

方法1：触发父元素的BFC #

给.main-container添加overflow: hidden或overflow: auto，触发BFC后可阻止外边距折叠：

.main-container {
  width: 400px;
  height: 570px;
  margin-left: 1em;
  margin-top: 1em;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
  overflow: hidden; /* 新增，触发BFC */
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  margin-top: 10px; /* 现在该属性会正常生效 */
  background-color: rgb(198, 235, 191);
}

方法2：给父元素添加上内边距 #

直接给.main-container设置padding-top，代替子元素的margin-top来实现间距：

.main-container {
  width: 400px;
  height: 570px;
  margin-left: 1em;
  margin-top: 1em;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
  padding-top: 10px; /* 父元素添加上内边距 */
  box-sizing: border-box; /* 确保内边距不会撑开容器宽度 */
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  background-color: rgb(198, 235, 191);
}

方法3：给父元素添加透明上边框 #

给.main-container加一个透明的上边框，也能阻止外边距折叠：

.main-container {
  width: 400px;
  height: 570px;
  margin-left: 1em;
  margin-top: 1em;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
  border-top: 1px solid transparent; /* 新增透明边框 */
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  margin-top: 10px; /* 正常生效 */
  background-color: rgb(198, 235, 191);
}

内容的提问来源于stack exchange，提问作者Mauricio Ocaña