margin 和 padding 的本质区别在于作用对象不同：padding 是内容区到边框的内衬，撑大元素自身尺寸；margin 是边框外的隔离带，不改变宽高，只影响布局位置。
margin 和 padding 本质区别在哪
它们都影响元素在页面中的空间占用，但作用对象完全不同：padding 是内容区到边框之间的“内衬”，撑大元素自身尺寸；margin 是边框外到相邻元素（或父容器）的“隔离带”，不改变元素自身宽高，只影响布局位置。
常见错误现象：给一个 div 加了 padding，结果发现设置的 width: 200px 变成了 200px + 左右 padding，内容被挤窄——这是因为默认 box-sizing 是 content-box。
- 用
box-sizing: border-box可让width包含padding和border，避免意外溢出 -
margin支持负值，padding不支持 - 垂直方向的相邻
margin会合并（margin collapse），padding永远不会
怎么写 margin/padding 才不踩坑
别直接写 margin: 10px 20px 就完事。四个方向的缩写顺序是上 → 右 → 下 → 左（顺时针），但很多人凭直觉以为是“上下左右”，一换顺序就错。
- 单值：
margin: 12px→ 四边都是 12px - 双值：
padding: 8px 16px→ 上下 8px，左右 16px - 三值：
margin: 4px 0 8px→ 上 4px、左右 0、下 8px - 四值：
padding: 2px 4px 6px 8px→ 上右下左 - 想只改某一边？直接用
margin-top、padding-left等单边属性，语义清晰还不易错
什么时候该用 margin，什么时候必须用 padding
判断依据不是“看起来要空一点”，而是“这个空间属于谁”。
- 需要把文字/子元素从边框拉开？用
padding（比如按钮文字离边框太近） - 想让两个块级元素之间有间隙？优先用
margin（比如段落之间留白） - 父容器加了
padding，子元素又加margin，可能造成多余空白——这时统一用父容器padding更可控 - 行内元素（如
span）对margin-top/bottom无效，但padding有效（不过会影响行高，需留意）
flex 或 grid 布局里 margin 还好使吗
能用，但容易和布局模型冲突。比如在 display: flex 容器中，给子项加 margin: auto 可以实现自动居中，这是个合法技巧；但若同时用了 justify-content 和 margin，行为可能不可预测。
- Flex 子项的
margin不会合并（无 margin collapse） - Grid 中用
gap替代子项间的margin更安全，语义也更明确 - 不要依赖
margin实现响应式间距——用 CSS 自定义属性 +calc()或媒体查询控制更可靠
box-sizing 的全局设定和 margin 合并带来的意外留白。这两个点不提前理清，后面调样式会反复“感觉哪里不对劲”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
