加padding是让内容离边框远，加margin是让盒子整体离其他盒子远；按钮文字贴边应加padding因属内容与边框关系，margin无效且可能引发布局错位。
别记“内边距”“外边距”这种说法——直接看效果更准：加 padding 是让内容离边框远点，加 margin 是让整个盒子离别的盒子远点。
为什么按钮文字贴边了，却该加 padding 而不是 margin
因为文字是按钮的“内容”，它和按钮的 border 之间需要留白。这个留白发生在元素内部，属于内容与边框的关系。
-
padding会撑开元素尺寸（默认box-sizing: content-box），同时背景色/图会填满这部分区域 -
margin加在边框外面，对文字位置毫无影响，只会影响按钮和其他元素（比如旁边一个输入框）的距离 - 如果误用
margin，可能发现按钮变大了但文字还是顶着边框，甚至因父容器没设置overflow: hidden导致布局错位
两个 <p> 标签之间空隙比预想的小，大概率是 margin 合并
这是 CSS 规范行为，不是 bug，但新手常以为自己写错了数值。
- 相邻块级元素的上下
margin会自动合并：比如margin-bottom: 20px和margin-top: 30px→ 实际间距只有30px - 子元素的上
margin还可能“漏出”父容器顶部（称为 margin-top collapsing），导致父容器看起来没顶边距 - 破除方法：给父容器加
border-top: 1px solid transparent、padding-top: 0.1px，或改用display: flex/display: grid
移动端按钮点击困难，可能是 padding 太小或单位用错了
小屏设备对可点击区域敏感，而 padding 直接决定热区大小。
立即学习“前端免费学习笔记（深入）”；
- 用
rem或vw写padding时，放大后可能让文字被严重挤压，尤其在 iOS Safari 中渲染更明显 -
margin用百分比（如margin-left: 5%）是按父容器宽度算的，不是当前元素宽——响应式断点切换时容易错估实际像素值 - 推荐：按钮类交互元素优先用固定单位（
px）或em（基于字体），避免缩放失真
box-sizing: border-box 是 padding 不撑大的唯一可靠方式
很多人以为 “加了 padding 就一定变宽”，其实只是默认行为。关键在盒模型计算逻辑。
- 不设
box-sizing时：width: 100px; padding: 10px;→ 实际占位宽度 =100 + 20 = 120px - 设
box-sizing: border-box;后：同一段代码，宽度仍为100px，内容区自动收缩 - 注意：这个声明要写在所有尺寸相关样式之前，且需考虑浏览器兼容性（IE8+ 支持）
真正难的不是记住定义，而是看到一个错位或溢出，能立刻判断是 margin 合并、padding 撑大、还是 box-sizing 没统一——这些细节在审查元素里一眼就能验证，但得先知道往哪看。
