padding是元素内容与边框间的内边距，影响背景和尺寸；margin是边框外与其他元素的间距，不显示背景且可为负值。1. padding属于内部空间，增加元素整体大小，背景色会延伸至该区域；margin属于外部空间，不影响自身尺寸但控制元素间距离。2. 使用padding可提升内容可读性、按钮舒适度；使用margin实现模块间隔、居中布局。3. 默认width仅含content，padding会扩大实际占用空间，可通过box-sizing: border-box调整；垂直margin相邻时会发生合并，取最大值而非叠加。掌握二者差异结合盒模型规则，能更精准控制网页布局。
在CSS盒模型中，padding（内边距）和margin（外边距）虽然都用于控制元素的空间，但它们的作用范围和应用场景完全不同。理解两者的区别有助于更精准地布局网页元素。
1. 基本概念与作用范围
padding 是指元素内容与边框之间的距离，属于元素内部空间。它会影响元素的背景色或背景图像的显示区域，因为 padding 区域是包含在 border 以内的。
margin 是指元素边框以外与其他元素之间的空白区域，属于元素外部空间。它不会显示背景，且可以为负值，用于调整元素之间的间距或实现特殊布局效果。
举例： 一个 div 设置了 width: 200px, padding: 20px，则实际内容宽度变为 160px（若 box-sizing 未设为 border-box）。而 margin: 20px 不影响该 div 的尺寸，只影响它与其他元素的距离。2. 背景与边框表现差异
padding 区域会继承元素的背景，比如设置了背景颜色或图片时，内边距部分也会被填充上背景。而 margin 区域始终透明，不显示任何背景样式。
立即学习“前端免费学习笔记（深入）”；
border 绘制在 padding 外侧，因此 padding 的大小直接影响 border 包裹的范围；margin 则位于 border 外面，不影响边框本身的位置。
常见误区： 误以为 padding 不占空间——实际上它会增加元素整体占用的宽度和高度（除非使用 box-sizing: border-box）。
3. 常见应用场景对比
合理使用 padding 和 margin 可提升页面可读性和结构清晰度。
适合使用 padding 的场景：- 让文本内容离边框有一定距离，提高可读性
- 按钮或导航项内部留白，使点击区域更舒适
- 保持背景连续性的同时增加内部空白
- 两个相邻模块之间设置间隔，如段落之间、卡片之间
- 居中块级元素（通过 margin: auto 实现）
- 调整元素在文档流中的位置，避免拥挤
4. 盒模型计算对布局的影响
默认情况下，width 和 height 只包括 content 区域，加上 padding 和 border 后总尺寸会变大。这常导致布局错位，可通过设置 box-sizing: border-box 解决。
当使用 margin 时，垂直方向上的相邻元素 margin 会发生“合并”现象（margin collapse），即取较大者而非相加，这一点在排版时需特别注意。
基本上就这些。掌握 padding 和 margin 的本质区别，结合 box-sizing 和 margin 合并规则，能更高效地控制页面布局结构。
