margin控制元素外间距，padding控制内边距；两者均可通过单、双、三、四值或单独方向设置，配合box-sizing:border-box可精准布局，避免默认间距影响，提升页面结构清晰度与可读性。
在css中，margin（外边距）和padding（内边距）是控制元素间距的两个核心属性。它们决定了元素与其他元素之间的距离以及内容与边框之间的空间。
margin 外边距设置方法
margin 用于设置元素边框以外的空间，影响元素与其他元素之间的距离。可以单独设置四个方向，也可以统一设置。
- 单值写法：margin: 10px; —— 四个方向都是10px
- 双值写法：margin: 10px 20px; —— 上下为10px，左右为20px
- 三值写法：margin: 10px 20px 30px; —— 上=10px，左右=20px，下=30px
- 四值写法：margin: 10px 20px 30px 40px; —— 顺时针：上右下左
- 单独设置：margin-top、margin-right、margin-bottom、margin-left
- 自动居中：margin: 0 auto; 可使块级元素在父容器中水平居中
padding 内边距设置方法
padding 用于设置元素内容与边框之间的空间，增加内容周围的空白区域。
- 单值写法：padding: 15px; —— 四个方向都留15px内边距
- 双值写法：padding: 10px 20px; —— 上下10px，左右20px
- 三值写法：padding: 10px 20px 30px; —— 上=10px，左右=20px，下=30px
- 四值写法：padding: 10px 20px 30px 40px; —— 上右下左依次设置
- 单独设置：padding-top、padding-right、padding-bottom、padding-left
- 注意：padding 会增加元素的实际宽度和高度（除非 box-sizing 被设置为 border-box）
box-sizing 的影响
默认情况下，元素的 width 和 height 只包含内容区域。当设置了 padding 或 border 后，元素总尺寸会变大。使用 box-sizing: border-box; 可以让 padding 和 border 包含在 width/height 内部，更便于布局控制。
立即学习“前端免费学习笔记（深入）”；
推荐在全局重置样式中加入：
*, *::before, *::after { box-sizing: border-box; }
常见使用场景
- 用 margin 分隔不同区块或段落，避免内容贴边
- 用 padding 提升文字可读性，比如在 div 中加内边距让文字不紧贴边框
- 清除默认 margin 和 padding：body, p, h1~h6, ul, li 等标签常有默认间距，建议初始化时清零
基本上就这些。掌握好 margin 和 padding 的设置方式，配合 box-sizing，能更精准地控制页面布局结构。