该用 margin 控制元素与其他兄弟元素的距离，用 padding 控制自身内容与边框的空隙；误用会导致间距异常、热区失效或盒模型尺寸偏差。
什么时候该用 margin，什么时候该用 padding
关键看作用对象：如果想控制元素「与其他兄弟元素之间的距离」，用 margin；如果想控制元素「自身内容与边框之间的空隙」，用 padding。
常见误用是给按钮加 margin 来撑开文字和边框——这其实是 padding 的职责；反过来，用 padding 把两个相邻 div 撑开，结果可能触发 margin 合并，间距不如预期。
-
margin会影响布局流，可能触发外边距合并（比如连续块级元素的上下margin会取较大值） -
padding属于元素内部空间，不影响其他元素位置，但会增大元素实际尺寸（在box-sizing: content-box下） - 背景色、边框只覆盖
padding区域，不覆盖margin区域
margin 合并问题怎么避开
相邻块级元素垂直方向的 margin 自动合并，常导致“设了 20px 却只看到 15px”的现象。这不是 bug，是规范行为。
- 父元素没有
border、padding或content时，子元素的上/下margin会“溢出”到父容器外，造成高度塌陷 - 解决方法之一：给父元素加
overflow: hidden或padding: 0.1px（最小有效非零值） - 更可控的方式：统一用
padding控制组内间距（如列表项之间），只用margin控制模块级间隔（如标题与正文之间）
padding 对点击热区的影响
按钮或链接的可点击区域，默认只覆盖文字范围。加 padding 是最轻量、最可靠地扩大热区的方式，比用 margin + 伪元素更直接。
立即学习“前端免费学习笔记（深入）”；
-
padding同时扩展了背景、边框、交互响应区域，用户点在空白处也能触发 click - 注意不要在设置了
box-sizing: border-box的元素上盲目叠加padding，否则可能意外压缩内容宽度 - 图标按钮常用
padding统一内外呼吸感，比如button { padding: 8px 12px; }
响应式中 margin 和 padding 的缩放逻辑差异
两者都支持媒体查询，但缩放策略不同：通常 padding 应随内容密度线性调整（小屏收窄，大屏舒展），而 margin 更倾向保持视觉节奏稳定。
- 移动端慎用大
margin分隔模块，容易造成横向滚动或留白失控；改用padding+ 背景分隔更安全 - Flex/Grid 布局中，优先用
gap替代子项margin，避免首尾多出额外间距 - 当用
rem或em定义时，padding随字体缩放，margin也一样——但若父元素font-size变了，子项em值含义就变了，容易误判
margin 的合并和 padding 对盒尺寸的影响，是最常被忽略的两个锚点。 
