margin不能让相邻块级元素间距翻倍，因垂直margin会折叠取较大值而非相加；解决方法包括统一用margin-bottom+last-child清零，或改用flex gap。
margin 为什么不能让两个相邻块级元素间距翻倍
因为相邻块级元素的垂直 margin 会折叠（collapse），不是相加。比如上面元素设 margin-bottom: 20px，下面元素设 margin-top: 15px，实际间距只有 20px（取较大值），而不是 35px。
常见错误现象：margin 设了却没生效、调试时发现 DevTools 显示的间距和预期不符、用 border 或 outline 一测才发现“少了一半”。
- 只在块级元素之间发生折叠，行内元素、浮动元素、绝对定位元素不参与
- 父容器与第一个/最后一个子元素的
margin也可能折叠，导致容器“塌陷”或上移 - 解决方法之一是给父容器加
padding或border阻断折叠；更稳妥的是统一用margin-bottom控制下间距，避免同时设上下 margin
用 margin 实现等距分割时，最后一个元素要不要删 margin
要删，否则多出一段无意义的空白。这是最常被忽略的布局细节。
使用场景：导航栏、卡片列表、表单项组——所有需要“项与项之间有间隔，但整体不溢出”的地方。
- 推荐写法：
.item { margin-bottom: 16px; }+.item:last-child { margin-bottom: 0; } - 不推荐用
:not(:last-child)，兼容性差且可读性弱 - 如果用 Flex 布局，可用
gap替代margin，完全规避折叠问题，但 IE 不支持
margin auto 在什么情况下能居中，什么情况下失效
margin: auto 居中只对「有明确宽度」的块级元素有效，且必须是水平居中（margin-left/right: auto）；垂直方向在普通文档流里基本无效。
常见错误现象：写了 margin: auto 却纹丝不动、元素贴左、或者整个页面错位。
- 必须满足三个条件：元素为块级（或设了
display: block）、设置了width（不能是auto）、没有浮动或绝对定位 -
margin: auto在 Flex 容器里行为不同：它会让元素沿主轴自动分配剩余空间，此时无需设 width 也能“撑开”间隙 - 想垂直居中？别硬扛
margin: auto，改用 Flex / Grid / transform 等更可控的方式
移动端用 margin 做分割线要注意什么
在高 DPR 屏幕（如 iPhone Retina）上，1px 的 margin 可能被渲染成物理像素不足，看起来“消失”或模糊。
这不是 bug，是设备像素比导致的视觉误差。尤其当背景色对比弱时更明显。
- 别依赖
margin模拟分割线，改用border-bottom: 1px solid #eee或伪元素::after+transform: scaleY(0.5) - 如果非要用
margin控制间距，请确保最小单位 ≥2px，避免在 iOS Safari 中因 subpixel 渲染失效 - 注意
viewport缩放设置，initial-scale=1必须存在，否则 margin 计算可能失准
margin 是最轻量的工具——但它不负责渲染、不保证可见、也不总按你直觉叠加。真要稳，得看上下文是否允许折叠、是否受限于设备像素、是否混用了定位或弹性布局。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
