padding是内边距，控制内容与边框的距离；margin是外边距，控制元素间的间距。两者分别影响内部空间和外部布局，正确使用可实现清晰的网页结构。
在网页布局中，padding 和 margin 是控制元素间距的核心属性。它们虽然看起来相似，但作用位置和实际效果完全不同。掌握这两个属性，是实现美观、合理的页面结构的基础。
padding：控制内容与边框之间的距离
padding 指的是元素的内边距，即内容（content）到边框（border）之间的空间。增加 padding 会让内容“远离”边框，使元素内部更宽松。
padding 可以分别设置四个方向，也可以统一设置：
- padding: 10px; —— 四个方向都为 10px
- padding: 10px 20px; —— 上下为 10px，左右为 20px
- padding: 10px 20px 15px 5px; —— 顺时针：上、右、下、左
- 也可单独设置：padding-top、padding-right、padding-bottom、padding-left
注意：padding 会增加元素的实际占用宽度和高度（除非使用 box-sizing: border-box）。
立即学习“前端免费学习笔记（深入）”；
margin：控制元素与其他元素之间的距离
margin 是元素的外边距，指元素边框之外的空间。它用于控制元素与周围元素之间的距离，常用于布局排版。
用法与 padding 类似：
- margin: 20px; —— 四周外边距都是 20px
- margin: 10px auto; —— 上下 10px，左右自动（常用于水平居中块级元素）
- margin: 5px 10px 15px 20px; —— 上、右、下、左
- 也可单独设置：margin-top、margin-right 等
特殊点：相邻块级元素的上下 margin 会发生合并（margin collapse），即取较大的那个值，而不是相加。
常见使用场景与技巧
理解 padding 和 margin 的区别后，可以更合理地应用在实际开发中：
- 想让文字离边框远一点？用 padding
- 想把一个 div 和下面的 div 隔开？用 margin-bottom
- 让一个块级元素水平居中？设置 margin: 0 auto 并确保有固定宽度
- 避免 margin 合并带来的意外？可用 padding 或 border 隔断
- 重置默认间距？很多开发者会在 CSS 开头写：* { margin: 0; padding: 0; } 再重新定义
基本上就这些。关键是要明白：padding 是“内撑”，影响元素内部；margin 是“外扩”，影响元素外部位置。用对地方，布局自然清晰。不复杂但容易忽略细节。
