bem命名本身不能阻止margin塌陷，因其仅规范类名结构而不改变css渲染规则；需通过单侧margin、bfc封装或flex/grid的gap等样式策略来规避。
为什么BEM命名本身不能阻止margin塌陷
BEM（block__element--modifier）只规范类名结构，不改变CSS渲染规则。哪怕你写成 .card__content 和 .card__footer，只要它们是垂直相邻的块级元素，且都设了 margin-top 或 margin-bottom，塌陷照常发生。BEM解决的是“命名混乱导致的样式难维护”，不是“浏览器盒模型机制”。真正起作用的是后续的样式编写方式——比如是否统一用单侧 margin、是否包裹 BFC 容器、是否在 block 层级控制间距。
在BEM中统一用 margin-bottom 控制兄弟间距
这是最轻量、最可控的做法，也天然规避兄弟元素间的 margin 合并问题（因为只设一侧，无“相遇”条件）。
- 所有可垂直堆叠的 BEM 元素，只声明
margin-bottom，顶部不留空 - 父 block 本身不设 margin，由内部第一个
__element的margin-bottom负责与上一个兄弟 block 的距离 - 最后一个子元素显式重置：
.block__element:last-child { margin-bottom: 0; } - 需要不同间距时，用 modifier 区分：
.block__element--tight { margin-bottom: 0.5rem; }
例如卡片列表：
.card { }
.card__header { margin-bottom: 0.75rem; }
.card__body { margin-bottom: 1rem; }
.card__footer { margin-bottom: 0; }
用 overflow: hidden 或 padding 封装 BEM block 防父子塌陷
当子元素（如 .block__title）设置了 margin-top，而你又不想改它——常见于复用组件——就得在 block 级别“截断”塌陷路径。此时不能靠 BEM 类名本身，得加一层样式干预。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 优先选
padding-top: 1px：视觉无感，不撑大布局（box-sizing: border-box下更稳），比border更干净 - 次选用
overflow: hidden：触发 BFC，但注意可能剪裁position: absolute子元素或阴影 - 避免给 block 加
margin-top再让子元素也加——这是塌陷高发组合
典型写法：
.card {
padding-top: 1px; /* 拦住 .card__title 的 margin-top */
}
.card__title {
margin-top: 1.25rem; /* 现在它只影响自身，不拉扯.card */
}
Flex/Grid 布局下 BEM 间距更简单，但别滥用 gap
在 display: flex 或 grid 容器上用 gap，确实能彻底绕过 margin 塌陷。但 BEM 的 block 应该是语义容器，不是布局工具——别为了省事把整个 .list 设成 flex，结果里面每个 .list__item 又要手动调 margin。
- 仅在明确需要弹性/网格对齐的场景用
gap，比如.button-group、.tag-list -
gap不继承，也不受 margin 影响，但它会作用于所有直接子元素，包括伪元素和文本节点 - 响应式切换时，
gap值需配合媒体查询，别指望它自动适配不同设备的“视觉节奏”
示例：
.button-group {
display: flex;
gap: 0.5rem;
}
/* .button-group__button 不再需要任何 margin */
真正容易被忽略的点是：BEM + 间距控制 = “谁负责哪一层距离”的契约。不是类名越长越安全，而是每个 __element 是否清楚自己该不该带外边距、该用单侧还是双侧、是否被父容器的 BFC 状态所约束。一旦契约模糊，再多的 --compact modifier 也救不了视觉断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
