加 padding 是撑开内容，加 margin 是推远元素；按钮文字贴边用 padding，因属内部留白；垂直 margin 会折叠，padding 不会但增加尺寸；行内元素上下 margin 无效，box-sizing: border-box 可统一控制尺寸。
加 padding 是把内容往里“撑开”，加 margin 是把整个元素往外“推远”——选错一个，背景色跑偏、间距塌陷、父容器莫名下移，都是现场可复现的问题。
按钮文字贴边该用 padding 还是 margin？
该用 padding。因为文字是按钮的“内容”，它和按钮的 border 之间需要留白，这个留白属于元素内部空间。
-
padding会撑开按钮尺寸（默认box-sizing: content-box），同时背景色/边框自然延伸进去 -
margin加在边框外，对文字位置毫无影响；误用会导致按钮和其他元素距离变大，但文字仍顶着边框 - 移动端点击困难常源于
padding太小——padding直接决定热区大小，别用margin冒充可点击区域
两个 <p> 之间空隙比预期小？大概率是 margin 折叠
这是 CSS 规范行为，不是 bug。相邻块级元素的垂直 margin 会自动合并：比如 margin-bottom: 20px 和 margin-top: 30px，实际只取 30px。
- 子元素的
margin-top还可能“漏出”父容器顶部（margin collapsing），导致父容器看起来没顶边距 - 破除方法：给父容器加
border-top: 1px solid transparent、padding-top: 0.1px，或设overflow: hidden（触发 BFC） -
padding不会折叠，但会增加元素总尺寸——若未设box-sizing: border-box，宽高需手动减去padding值
行内元素（如 <span>）对 padding 和 margin 的响应很怪？
没错。行内非替换元素只尊重左右方向的 padding 和 margin；上下 padding 会渲染但不改变行高，上下 margin 则完全无效。
立即学习“前端免费学习笔记（深入）”；
- 想让
<span>上下有视觉间距？优先调line-height，或包一层display: inline-block容器再设padding -
margin-left/margin-right有效；margin-top/margin-bottom写了也白 -
padding-top/padding-bottom虽然渲染出来，但可能溢出到相邻行，造成错位
如何避免 padding 撑大元素又不用反复计算尺寸？
统一设 box-sizing: border-box。这是唯一可靠解法，能让 width 和 height 包含 padding 和 border。
- 声明必须写在所有尺寸相关样式之前，否则可能被覆盖
- 兼容性足够好（IE8+ 支持），现代项目可放心全局设置：
* { box-sizing: border-box; } - 注意：这个设置不影响
margin行为，margin始终不参与尺寸计算，也不受box-sizing影响
真正难的不是记住定义，而是看到一个错位或溢出，能立刻判断是 margin 合并、padding 撑大、还是 box-sizing 没统一——这些细节在审查元素里一眼就能验真伪，但得先知道该盯哪几行。
