margin正值推远邻居、负值实现重叠或回拉、auto依上下文分配空间、百分比相对包含块宽、移动端慎用百分比而推荐vw/rem。
margin 正值会让盒子离邻居更远
正的 margin 是默认行为，比如 margin: 10px 表示盒子四边都往外推 10px，和相邻元素拉开距离。浏览器会按标准盒模型计算：外边距不参与盒子自身尺寸，但会影响它在文档流中的占位。
常见错误是以为 margin: 20px 会让盒子“变大”，其实只是它周围留白多了；真正影响布局的是它推开了父容器内边距或兄弟元素。
- 块级元素上下
margin会合并（collapse），比如两个div各设margin-bottom: 20px和margin-top: 15px，实际间距只有 20px，不是 35px -
margin设为百分比时，是相对于**包含块宽度**计算的，哪怕用在margin-top或margin-bottom上 - 浮动元素的
margin不会和普通流中元素合并，但可能被父容器塌陷“吃掉”
margin 负值能让盒子重叠或拉回位置
负 margin 不是 bug，是合法且常用的手法，比如实现等高列、微调定位、取消父容器默认间距。它的作用是让盒子向指定方向“缩回”，视觉上压进邻居或父容器里。
典型场景：清除 ul 默认的上下外边距，写 margin: 0 不够，因为很多 UA 样式里 ul 有 margin-block-start: 1em，直接设 margin-top: -1em 更干脆。
- 负
margin不会触发重排（reflow）以外的副作用，但可能让内容被遮挡，需配合z-index或 DOM 顺序控制层叠 - 行内元素对
margin-top/margin-bottom的负值基本无效（不改变行高，也不推挤行框） - Flex 容器子项的
margin负值仍生效，甚至能用来“吸住”边缘，比如margin-left: -100%配合flex-shrink: 0
margin: auto 在不同上下文效果完全不同
margin: auto 看似简单，但行为高度依赖上下文——它不是“居中万金油”，而是由渲染引擎根据格式化上下文（BFC、Flex、Grid）决定如何分配剩余空间。
比如块级元素在普通流中设 margin: 0 auto，只有宽度固定时才水平居中；而 Flex 子项设 margin: auto，会直接吸满所有可用空间，把其他子项挤开。
- 绝对定位元素的
margin: auto在老版 Chrome 里不居中，得靠left: 0; right: 0; margin: auto配合固定宽高 - Grid 项设
margin: auto可分别控制行列对齐，比如margin: auto 0垂直居中、左对齐 - 不要对
display: inline元素用margin: auto，它会被忽略
移动端慎用 margin 百分比防意外缩放
在响应式页面里，margin: 5% 看似方便，但容易在小屏上导致外边距过小（比如 375px 屏幕下 5% = 18.75px），文字或按钮紧贴边缘，影响点击热区。
更稳的做法是结合 min-width 或用视口单位：margin: 1vw 比 margin: 1% 更贴近物理尺寸感，尤其在横屏 iPad 上差异明显。
- iOS Safari 对
margin百分比在 zoom 缩放时有轻微计算误差，极端情况下出现 1px 错位 - 用
rem配合根字体大小调节margin更可控，比如html { font-size: 16px; }，再设margin: 1rem - 媒体查询里改
margin值比用 JS 动态算更轻量，避免强制同步布局（layout thrashing）
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
