margin在外部、padding在内部：margin影响元素外部布局空间且不占自身尺寸，padding影响内部内容留白并撑大自身宽高（box-sizing默认为content-box）。
margin 和 padding 到底谁在“外面”谁在“里面”
直接看效果：给一个 <div> 加 <code>margin: 20px，它和隔壁元素的距离变大；加 padding: 20px，它的内容（比如文字）离边框变远了，但整体尺寸其实也变大了——这是最常混淆的起点。
根本区别不在“方向”，而在“影响范围”：margin 影响的是元素**外部的布局空间**，不占自身尺寸；padding 影响的是元素**内部的内容留白**，会撑大自身的 width 和 height（除非用了 box-sizing: border-box）。
- 没设
box-sizing时，width: 100px; padding: 10px→ 实际占位宽度是 120px -
margin不会触发父容器的min-height计算，但负margin可以让元素“挤出”父容器边界 -
padding支持背景色填充，margin永远透明（哪怕设了background也透到底层）
什么时候必须用 margin，什么时候只能用 padding
选哪个不是凭感觉，而是看你要动的是“布局关系”还是“内容呼吸感”。
- 想让两个按钮之间拉开距离？用
margin—— 它们属于不同元素，间距是它们之间的“空隙” - 想让按钮文字不贴着边框？用
padding—— 这是按钮自己内部的留白 - 父容器有
border或background，又想内容不顶边？只能用padding，margin对父容器内部无感 - 做垂直居中时，
margin: auto在块级元素上有效，但对行内元素或 flex 子项无效 —— 这时候得换思路
margin 合并（collapsing）为什么总让人懵
相邻块级元素的上下 margin 会自动合并成一个，取其中较大值。这不是 bug，是 CSS 规范行为，但非常容易误判。
- 两个
<p></p>各设margin-bottom: 20px和margin-top: 30px→ 实际间距是 30px，不是 50px - 父容器没边框、没内边距、没内容分隔，子元素的
top margin会“漏”到父容器外 —— 表现为父容器没顶边距，但内容却往下掉了 - 破除合并的方法：给父容器加
border-top: 1px solid transparent或padding-top: 0.1px，或者改用flex/grid
移动端适配时 padding 和 margin 的隐形坑
在小屏幕上，看似安全的数值可能引发溢出或点击热区不足。
-
padding太大会让可点击区域变窄（比如按钮内边距过大，文字被挤小），尤其在rem或vw单位下放大后更明显 -
margin用百分比时（如margin-left: 5%），是相对于父容器宽度计算的，不是当前元素 —— 容易在响应式断点里错估距离 - iOS Safari 对
margin-bottom在position: fixed元素上支持不稳定，有时失效；改用padding-bottom或transform: translateY()更可靠 - 用
gap替代margin布局 flex/grid 项目，能彻底避开合并问题，且语义更清晰
真正难的不是记清规则，而是每次写 margin 或 padding 前，先问一句：我在动的是“我和别人的关系”，还是“我和自己的内容的关系”。这个判断错了，后面调半天都是白费劲。
