标准答案
- margin 塌陷指普通文档流里，块级元素的垂直 margin 可能合并成一个 margin，而不是简单相加。
- 它只发生在垂直方向，水平 margin 不会塌陷。
- 常见场景有相邻兄弟块、父元素和第一个或最后一个子元素、空块元素自身的上下 margin。
- 避免方式可以是给父元素加 padding 或 border，让父元素创建 BFC，比如 display: flow-root，或者改用 flex/grid。
- 工程里更推荐用容器 gap 或统一 spacing 规则管理间距，减少子元素 margin 互相碰撞。
题目解析
这题的重点是“垂直 margin 合并”，不是 margin 失效。浏览器这样设计是为了让普通文档流里的段落间距更自然。
Flex 和 Grid 容器里的子项不会发生传统的父子 margin 塌陷，现代布局里可以优先使用 gap。
代码示例
父元素创建 BFC 后，子元素 margin 不会再穿透到父元素外部。
CSS
.panel {
display: flow-root;
}
.panel-title {
margin-top: 24px;
}常见误区
- 认为两个垂直 margin 会相加，忽略它们可能合并。
- 把 margin 穿透父元素当作浏览器 bug。
- 靠给子元素随意加 padding 修补，导致组件间距越来越不可控。