margin 为什么有时没效果？元素塌陷是常见原因
块级元素的上下 margin 会合并，不是“失效”，而是浏览器按规范做了外边距折叠。比如两个相邻 <p></p> 各设 margin-bottom: 20px 和 margin-top: 20px，实际间距只有 20px，不是 40px。
- 只发生在**普通文档流中的块级盒子**之间（不包括浮动、绝对定位、flex 子项）
- 父容器没有
border、padding或content时，子元素的上/下margin会“溢出”到父容器外，造成父容器高度塌陷 - 解决方法之一：给父容器加
border-top: 1px solid transparent或padding-top: 1px - 更通用的解法是触发 **BFC**，例如设置
overflow: hidden、display: flow-root
用 margin 实现等距排列，别硬写重复值
多个并列元素需要相同外部间距时，直接给每个都设 margin-right 会导致最后一个元素多出一截空白。这不是 bug，是逻辑结果。
- 推荐用
:not(:last-child)选择器：.item:not(:last-child) { margin-right: 16px; } - Flex 布局更省心：
display: flex+gap: 16px，完全绕过margin合并和末尾多余间隙问题 - 如果必须用纯
margin，可用负边距抵消：父容器设margin-right: -16px，子项设margin-right: 16px，但可维护性差，慎用
margin: auto 在什么情况下能居中？别乱试
margin: auto 能水平居中，前提是元素有**明确宽度**且处于**块级正常流**中。它对 inline 元素、flex 子项或没有设宽的块元素无效。
- 水平居中块元素：
width: 300px; margin: 0 auto; - 垂直居中？仅在 flex 或 grid 容器内配合
margin: auto才可靠；在普通块流中，margin: auto对垂直方向不起作用 - 注意：IE8 及以下不支持
margin: auto居中，如需兼容，得用text-align: center+inline-block组合
移动端 margin 百分比值，参照的是父容器宽度
margin-top 或 margin-bottom 写成百分比时，计算基准**永远是父容器的 width**，不是 height。这点和 padding 一致，但容易误以为“上下 margin 应该参照高度”。
立即学习“前端免费学习笔记（深入）”；
- 例如父容器宽 400px，
margin-top: 10%→ 实际是 40px，哪怕父容器高度只有 20px - 想实现基于高度的垂直间距？只能用
vh单位（如margin-top: 5vh），或 js 动态计算 - 在视口缩放频繁的场景（如 ios safari 横竖屏切换），
vh可能因地址栏显示/隐藏而跳变，此时margin百分比反而更稳定
真正难的不是写 margin，是判断它此刻到底在跟谁算、被谁影响、有没有被折叠或忽略——浏览器不会报错，但渲染结果常和直觉相反。