嵌套div存在无法去除的顶部边距，该如何排查解决？

核心问题原因 #

是外边距折叠（Margin Collapse） 特性导致的子元素上边距溢出。

原理说明 #

CSS中块级元素的上下外边距在特定场景下会发生合并：当父元素没有设置上边框、上内边距，也没有创建块格式化上下文（BFC）时，父元素的上外边距会和其第一个子元素的上外边距发生折叠，子元素的上外边距会直接溢出到父元素外侧，视觉上表现为父元素顶部出现了多余的边距。
你的代码中<p id="trial-text">标签自带默认上下外边距，它的父元素#trial-button没有触发BFC、也没有上边框/内边距，所以trial-text的margin-top:10px直接溢出到了外层，导致#trial-div顶部出现了多余间距。

可落地解决方案 #

• 方法1：清除p标签默认外边距，改用内边距控制位置

#trial-text {
  margin: 0; /* 清除p标签默认自带的上下外边距 */
  padding-top: 10px; /* 用内边距替代外边距实现文字位置调整，内边距不会触发折叠 */
  text-align: center;
  font-weight: bold;
  font-size: 90%;
  font-family: Arial;
}

• 方法2：给#trial-button触发BFC，阻止外边距溢出，同时可以直接用flex实现内容居中更省心

#trial-button {
  height: 70%;
  width: 90%;
  background-color: #FA7035;
  color: white;
  border-radius: 4px; /* 10%圆角会变形，用px数值更符合常规按钮样式 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
/* 此时trial-text不需要设置margin/padding即可居中，可直接删除相关margin属性 */

• 方法3：给#trial-button添加上内边距/上边框，阻断外边距折叠

#trial-button {
  padding-top: 1px; /* 极小的上内边距即可挡住子元素外边距溢出，不影响视觉效果 */
}

另外如果要让按钮在#trial-div中完全居中，可以给#trial-div添加flex布局属性：

#trial-div {
  width: 140px;
  background-color: burlywood;
  float: left;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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