padding 和 border 都不直接控制元素间的距离
这是最常见的误解。padding 是内容区到边框的距离，border 是边框自身宽度，它们影响的是元素“内部尺寸”，而非它和兄弟或父容器之间的间距。真正控制元素间距离的是 margin —— 外边距才是专门为此设计的。
为什么用 padding 或 border “凑”间距会出问题
强行用 padding 或 border 模拟间距，会导致以下实际后果：
-
padding会让背景色、背景图、阴影等向内延伸，视觉上可能误判可点击区域或内容边界 -
border会增加元素总宽度（在box-sizing: content-box下），容易引发布局错位，尤其在 flex 或 grid 容器中挤占可用空间 - 当元素有 hover 或 focus 样式时，突然变宽/变高会触发重排（reflow），影响性能
- 响应式断点里，用
padding代替margin会让媒体查询逻辑变复杂——你得同时调内容内边距和外边距
正确做法：用 margin 控制间距，用 padding/border 做内部修饰
把职责分清楚，代码更可维护：
- 相邻两个按钮之间留空？用
margin-right或margin-bottom - 卡片内容离边框要呼吸感？用
padding，不是靠加border冒充间隔 - 需要“视觉上拉开距离”但又不想动布局流？考虑
gap（flex/grid 容器）或margin的负值（慎用） - 如果父容器设置了
overflow: hidden，而子元素用了负margin，记得检查是否被裁切
box-sizing 是关键兼容前提
默认 box-sizing: content-box 下，width + padding + border 才是元素真实占用宽度；换成 border-box 后，width 就包含 padding 和 border。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 用
padding调整内部留白时，border-box更可预测，推荐全局设置：* { box-sizing: border-box; } - 写固定宽度组件（如输入框、按钮）时，若忘了
border-box，加个1px solid可能就让元素撑破容器 - 某些老项目用
content-box，此时padding改动会意外改变元素在布局中的位置，需格外留意计算
实际开发中，最易被忽略的是：间距需求出现时，第一反应不该是“加 padding”，而是“这个间隙属于谁的 margin”。 一旦归属搞错，后续适配、复用、交接都会多一层理解成本。
