盒模型四层从内到外依次是content、padding、border、margin；content是内容，padding是内边距，border是边框，margin是外边距，其中前两者影响元素自身尺寸，margin仅影响外部间距。
盒模型四层到底谁包着谁？用快递盒对照就明白了
content 是盒子里的物品，padding 是包裹物品的气泡纸，border 是硬纸箱本身，margin 是两个箱子在货架上留出的空隙——这个类比不是比喻，是真实对应关系。打开浏览器开发者工具（F12），选中元素后勾选 Show box model，就能看到这四层彩色嵌套，像剥洋葱一样一层层验证。
关键点在于：padding 和 border 都属于元素“自身”，它们会增大元素实际占位；margin 则完全游离于元素之外，不参与背景渲染，也不影响元素自身的尺寸计算，只决定它和邻居的距离。
width/height 默认只管 content，加 padding 或 border 就会撑大盒子
这是新手最常踩的坑：写了 width: 200px，又加了 padding: 10px 和 border: 2px solid #000，结果盒子总宽变成 224px，超出父容器导致横向滚动或布局错乱。
- 默认
box-sizing: content-box：总宽 =width+ 左右padding+ 左右border+ 左右margin - 换成
box-sizing: border-box：width直接包含 content + padding + border，更符合直觉，现代项目应全局设置：* { box-sizing: border-box; } -
margin始终不参与width/height计算，但会影响文档流中该元素占据的“有效空间”
padding 和 margin 别混用：一个管“内距”，一个管“外距”
常见错误是用 padding 去拉开两个兄弟 div 的距离——这会让父容器被迫扩大，还可能引发意外的高度塌陷；正确做法是用 margin 控制它们之间的间隙。
立即学习“前端免费学习笔记（深入）”；
-
padding影响内部可读性（比如文字离边框太近会显得拥挤），背景色/图会延伸进来 -
margin可设负值（用于微调重叠、消除默认间距），但垂直方向相邻块级元素会发生 margin 塌陷（取两者较大值，而非相加） - 行内元素对
padding-top/bottom有效（视觉上推高），但不影响行高；margin-top/bottom则完全无效
border-radius 是弯在 border 外边缘，不是 content 上
border-radius: 4px 的圆角作用点在 border 的外轮廓线上，所以加了圆角后，整个 border（包括它的宽度）都会弯曲。如果同时设置了 background-clip: padding-box，背景就不会延伸到 border 区域，这时圆角视觉效果会变“瘦”——因为只有 padding 区域被裁圆，border 还是方的。
真正要注意的是：当 border 很粗（比如 10px）且 border-radius 较小时，圆角可能看起来不明显；建议让 border-radius ≥ border-width，否则边缘容易显得生硬。
最容易被忽略的其实是 margin 塌陷和 box-sizing 的全局一致性——哪怕只漏掉一个 input 或 button 没继承 border-box，都可能在表单对齐时突然“多出几像素”。
