内边距（padding）会撑大元素自身尺寸，在content-box下width/height不包含padding；外边距（margin）控制元素间距但会折叠，且不影响自身尺寸；box-sizing切换需全局协调，推荐新项目统一用border-box。
内边距（padding）会撑大元素自身尺寸
内边距是内容区和边框之间的透明区域，它直接参与元素总尺寸计算。在默认 box-sizing: content-box 下，width 和 height 只管内容区，padding 是额外加上的。
常见错误现象：
- 给一个
width: 200px的div加了padding: 10px，结果发现它占了 220px 宽——不是 bug，是标准行为 - 用百分比宽度（如
width: 50%）再加padding，容易导致换行或溢出，尤其在小屏幕下
实操建议：
- 统一设置全局
* { box-sizing: border-box; }，让padding包含在width/height内，大幅降低尺寸误判概率 - 行内元素（如
span）设padding有效，但不会影响行高，可能造成上下“悬空”，需配合vertical-align调整 -
padding的背景色会显示出来，这是它和margin的关键视觉区别
外边距（margin）控制元素间距离，但会折叠
margin 是边框之外的透明区域，不占背景，也不影响自身尺寸，只影响它和邻近元素的相对位置。但它有个反直觉特性：垂直方向相邻块级元素的 margin 会合并（collapse）。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 两个
p标签分别设了margin-bottom: 20px和margin-top: 30px，实际间距却是 30px，不是 50px - 父元素没设
border或padding，子元素的margin-top“漏出”到父容器外，导致父容器上沿没留白
实操建议：
- 避免依赖 margin collapse 做布局；需要确定间距时，优先只在其中一个元素上设 margin（比如只用
margin-bottom） - 解决父容器“塌陷”问题：给父元素加
border: 1px solid transparent或padding: 0.1px，即可阻止子元素 margin 溢出 -
margin: auto在块级元素上可实现水平居中，但前提是元素有明确width且为block（非inline）
padding 和 margin 在 display 类型下的表现差异
它们对不同 display 值的元素影响不一致，这点常被忽略。
关键差异点：
-
display: inline元素：padding左右生效、上下可视但不推挤其他行内元素；margin左右生效，上下完全无效（不改变行高，也不推开相邻元素） -
display: inline-block元素：两者上下左右都生效，但元素仍保持行内排列，容易因换行符产生意外间隙 -
display: block元素：两者全部方向都按预期影响布局和尺寸
实操建议：
- 想给文字链接扩大点击热区？别只加
padding，同时设display: inline-block，否则上下 padding 不起作用 - 用
margin做垂直对齐时，确认父容器不是inline或未触发 BFC，否则可能失效
box-sizing 切换带来的连锁反应
box-sizing 不只是改一个属性，它会重定义整个尺寸链路。一旦切换，所有基于旧模型写的 width/height + padding/border 组合都要重新验证。
典型踩坑场景：
- 第三方 UI 库（如 Bootstrap）内部大量使用
box-sizing: border-box，若你项目全局重置为content-box，按钮、输入框等控件会变宽、错位 - 用
calc(100% - 20px)配合padding时，在border-box下，这个 20px 是否已包含 padding？必须明确上下文
实操建议：
- 新项目起步就加
* { box-sizing: border-box; }，并确保 reset.css 或 normalize.css 不覆盖它 - 老项目迁移时，不要全局替换，先用
[class*="pad"]这类选择器局部测试，再逐步推进 - 调试时在 DevTools 里看元素尺寸面板，注意右上角显示的是“computed width/height”，它已经包含了当前
box-sizing的计算结果
真正难处理的不是单个属性怎么写，而是当 padding、margin、display、box-sizing 四者叠加作用于嵌套结构时，哪一层在主导最终空间分配——这时候靠猜不如打开 DevTools 看 computed 值。
