在CSS盒模型中，margin和padding分别应用于哪些典型场景？请给出具体的使用情境。

回答思路

1. 【回答框架 1】margin是元素边框外的空间，用来控制元素与兄弟元素或父容器边缘的距离，常用于实现元素居中、分隔不同区块、调整页面整体布局的间距。padding是元素内容与边框之间的内填充，作用于元素内部，可增大可点击区域、控制文字与边框的呼吸空间。
2. 【回答框架 2】margin存在垂直方向折叠机制，相邻元素的上下margin可能会合并取较大值，影响间距计算的直观性；而padding不会折叠，但会扩大元素的实际尺寸，除非设置了box-sizing: border-box。
3. 【回答框架 3】使用margin的场景包括：让块级元素水平居中（配合固定宽度）、在多个兄弟元素间建立间距、模拟段落间距等。使用padding的场景包括：按钮内文字与边框的留白、卡片内文字与边缘的距离、导航栏内链接的点击区域扩大等。
4. 【回答框架 4】两者的选择常取决于设计意图：margin影响外部布局流，padding影响内部视觉和可点击区域。实际项目中，推荐使用margin进行外部间距管理，padding用于内部空间，并统一使用rem或em以保持响应式一致性。
5. 【关键点 1】margin控制元素外部间距，padding控制元素内部填充。
6. 【关键点 2】margin会发生垂直折叠，padding不会。
7. 【关键点 3】margin常用于水平居中（固定宽度+auto），padding常用于扩大可点击区域和内部留白。
8. 【易错点 1】忽略margin折叠机制，导致垂直间距比预期小。
9. 【易错点 2】未考虑box-sizing，padding改变元素实际尺寸，影响布局。
10. 【易错点 3】滥用margin或padding造成间距不一致，如使用margin会受父级影响，padding会扩大背景区域。