padding是内容到边框的距离，属内部空间；margin是边框到相邻边框的距离，属外部空间。padding影响盒尺寸且支持背景/圆角，margin可为负且不参与尺寸计算。
padding 和 margin 的本质区别在哪
很多人混淆 padding 和 margin，根本原因是没抓住“谁的边距”这个关键点：padding 是内容区域到盒子边框之间的距离，属于盒模型内部空间；margin 是当前盒子边框到相邻盒子边框的距离，属于外部空间，不参与盒尺寸计算（除非触发 BFC 或 margin 合并）。
典型误用场景：想让两个 div 之间留空，却在第一个元素加 margin-bottom，又在第二个加 margin-top——结果可能只生效一个值（垂直方向 margin 合并），视觉间距反而不对。
垂直方向 margin 合并怎么破
块级元素上下相邻时，margin-top 和 margin-bottom 会取较大者，而不是相加。这是 css 规范行为，不是 bug，但常导致布局“塌陷”或间距意外变小。
- 避免相邻兄弟元素都设垂直 margin：只给上方元素设
margin-bottom，或只给下方设margin-top - 用
padding替代：比如父容器加padding-bottom，比子元素加margin-bottom更可控 - 触发 BFC：给父容器设置
overflow: hidden、display: flow-root或Float，可阻止子元素 margin 向外传递（也间接避免合并） - 使用 flex/grid 布局：现代布局中，
gap属性直接控制项目间距，完全绕过 margin 合并问题
padding 影响 width/height 的坑怎么避
默认 box-sizing: content-box 下，设置 width: 200px + padding: 20px，实际占用宽度是 240px（内容宽 200，左右 padding 各 20）。这容易导致响应式断点错乱或容器溢出。
立即学习“前端免费学习笔记（深入）”；
- 全局重置：在
:root或*选择器中设box-sizing: border-box，让width包含padding和border - 慎用百分比 width + 大 padding：比如
width: 100%+padding: 2rem，可能撑破父容器；此时改用max-width或配合calc(100% - 4rem) -
padding不能为负值，而margin可以——这是唯一能“拉近”元素的合法方式（如负 margin 抵消间隙）
什么时候该用 padding 而不是 margin
核心判断依据：是否需要背景色/边框/阴影一起延伸。
- 按钮文字离边缘太近？用
padding，这样背景色自然撑开，点击热区也变大 - 卡片内容和边框之间要留白？用
padding，否则margin会让背景色紧贴边框，视觉压抑 - 两个带背景色的区块之间要留空？优先用
margin，避免背景色连成一片；但如果其中一个要撑满容器（如全宽 banner），则用父容器padding隔开更稳妥 - 表单
input的内边距必须用padding，因为margin不影响光标位置和文字对齐
最常被忽略的一点：当元素有 border-radius 时，padding 会让圆角内的内容自然内缩，而 margin 对圆角形状毫无影响——这点在设计卡片、标签类组件时特别关键。