margin 是元素外边距，影响外部空间；padding 是内边距，影响内部空间。两者通过不同方式设置方向与大小，常用于卡片布局、按钮设计、避免外边距折叠及居中元素。配合 box-sizing: border-box 可提升布局精度。
在CSS中，margin 和 padding 是控制元素间距的两个核心属性。正确理解和组合使用它们，能有效提升页面布局的可读性与美观度。
理解 margin 与 padding 的区别
margin 指元素与其他元素之间的外边距，属于元素外部空间，不会影响背景或边框。
padding 是元素内容与边框之间的内边距，属于元素内部空间，背景色会延伸至 padding 区域。
简单记忆：margin 出去，padding 进来。
设置 margin 和 padding 的方式
两者都支持单边、双边、三边或四边设置，语法灵活：
立即学习“前端免费学习笔记（深入）”；
-
统一设置四边：
margin: 10px; /* 上右下左都是10px */
padding: 20px; /* 四边内边距均为20px */ -
设置对边（上下/左右）：
margin: 10px 20px; /* 上下=10px，左右=20px */ -
设置四边顺序（顺时针）：
padding: 10px 15px 20px 25px;
/* 上=10px，右=15px，下=20px，左=25px */ -
单独设置某一边：
margin-top: 5px;
padding-left: 30px;
margin 与 padding 的典型组合应用
实际开发中，常通过组合控制元素整体视觉效果：
-
卡片布局：
用 padding 给卡片内容留出呼吸空间，用 margin 让卡片之间保持距离。
例如：
padding: 16px; margin-bottom: 12px; -
按钮增强点击区域：
padding 增加文字与边框的距离，提升可读性；margin 避免按钮紧贴其他元素。 -
避免外边距折叠：
相邻元素的垂直 margin 会合并，可通过只设其中一个 margin 或使用 padding 来规避。 -
居中块级元素：
margin: 0 auto; 可使固定宽度的块元素水平居中，此时 padding 不影响居中逻辑。
注意事项与技巧
- 默认情况下，元素的 width/height 不包含 padding，但设置 box-sizing: border-box 后会包含，推荐全局设置以简化计算。
- margin 可为负值，用于重叠或反向偏移；padding 不能为负。
- 行内非替换元素（如 span）的 vertical margin 无效，但 horizontal padding 有效。
基本上就这些。掌握 margin 与 padding 的差异和搭配方式，能让布局更精准、更可控。不复杂但容易忽略细节。
