边距算不准的根源在于混淆margin与padding作用范围，并忽略盒模型、默认样式和层叠规则；margin在border外侧，影响外部布局且存在塌陷，padding在border内侧，增加自身尺寸。
边距算不准，往往不是计算错了，而是没分清 margin 和 padding 的作用范围，又忽略了盒模型、默认样式和层叠规则这些“隐形变量”。
margin 是元素外的空隙，影响的是它和邻居的距离
margin 在 border 外侧，不占元素自身尺寸，但会参与外部布局。比如两个 div 垂直排列，各自设 margin-bottom: 20px，实际间距不是 40px，而是 20px（塌陷）——这是垂直方向 margin 合并的默认行为。
- 上下相邻块级元素的 margin 会合并，取较大值（不是相加）
- 父元素没设置 border/padding 时，子元素的 top/bottom margin 可能“漏出”到父容器外（外边距塌陷）
- inline 元素对 vertical margin 无效（只认水平方向）
padding 是元素内的空隙，撑大自身尺寸
padding 在 border 内侧，属于元素“身体内部”，会增加元素的宽高（除非用了 box-sizing: border-box）。比如一个 width: 100px 的盒子加 padding: 10px，默认总宽变成 120px（左右各+10）。
- padding 值不能为负
- 它始终在 border 以内，不影响其他元素位置（除非触发 overflow 或改变行高）
- 按钮文字离边缘太近？优先调 padding，不是 margin
盒模型和默认样式才是“真凶”
浏览器对很多标签有默认 margin/padding（如 h1 有上下 margin，ul 有左右 padding），重置不干净就容易误判间距来源。另外，box-sizing 默认是 content-box，width/height 不含 padding 和 border；改成 border-box 后，padding 就不再“额外加宽”了。
- 调试时右键检查元素，看 computed 标签页里 margin/padding 实际生效值
- 用
* { box-sizing: border-box; }统一盒模型，减少意外伸缩 - 用
margin: 0; padding: 0;重置前先确认是否真需要——有些默认间距是可访问性所需
margin 和 padding 搭配用才稳
单靠一个很难精准控距。常见组合：
外层容器用 margin 控制与兄弟元素距离；内层内容用 padding 留白；边框用 border 分隔视觉区域。
- 卡片之间留空？用外层卡片的 margin
- 卡片内文字离边框太近？调卡片的 padding
- 想让点击区域更大但不撑开布局？给按钮加 padding，同时设
box-sizing: border-box
基本上就这些。不复杂，但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
