HTML/CSS外边距折叠问题咨询：最优方案及入门资料推荐

Hey there! Let's tackle your margin collapse issue step by step, and make sure you're building good CSS habits along the way.

先搞清楚问题根源 #

你猜的没错——这个过大的间距确实是**外边距折叠（margin collapse）**导致的。具体来说：

• 你的.home-section是没有设置border/padding/overflow的块级元素，它里面的.text-block设置了margin-top: 15vh。
• 根据CSS规则，子元素的顶部外边距会“穿透”父元素，和后续兄弟元素（.products-section）的顶部外边距发生折叠，最终形成了看起来过大的间距。

分析你的临时解决方案 #

你的三个注释代码都能解决问题，但确实不是最优选择：

• border: 1px red solid：通过给父元素加边框破坏了外边距折叠的条件，但额外的边框可能影响布局（即使是1px，也可能在响应式场景下出问题）。
• margin-bottom: -15vh / margin-top: -15vh：用负外边距抵消折叠效果，虽然能快速解决，但负边距的维护成本很高，后续调整布局时容易出现意想不到的偏移。

最优解决方案（推荐） #

最干净、最易维护的方法是触发父元素的块格式化上下文（BFC），BFC会自动阻止外边距折叠。只需要给.home-section加一行代码：

.home-section {
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* 触发BFC，解决外边距折叠 */
}

这个方法不会添加额外的布局元素，也不会影响现有样式，是处理这类问题的标准做法。

代码结构优化建议 #

你的基础样式（*选择器重置margin/padding、设置box-sizing: border-box）做得非常棒，这是良好编码习惯的开始！还有一个小优化点：

• 你的.banner是固定定位（脱离文档流），当前.text-block用margin-top:15vh避开banner，但如果后续section内容较少，顶部可能会被banner遮挡。建议给所有section统一添加padding-top：

section {
  padding-top: 7vh; /* 和banner的高度一致，确保内容不被遮挡 */
}

之后可以把.text-block的margin-top调整为8vh（15vh - 7vh），保持原来的视觉位置不变。

面向初学者的阅读资料 #

• 外边距折叠详解：MDN的「外边距折叠」文档，详细讲解了折叠的规则、例外情况和解决方法，是必看的基础内容。
• BFC入门：MDN的「块格式化上下文」章节，理解BFC能帮你解决很多常见的CSS布局问题（比如浮动、外边距折叠）。
• CSS布局基础：CSS-Tricks的「Beginner's Guide to CSS Layout」，用通俗易懂的方式讲解核心布局概念，适合新手系统学习。

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