box-sizing: border-box 是间距可控的前提，它使 width/height 包含 padding 和 border，避免尺寸溢出；padding、margin、border 各司其职，gap 替代 margin 实现容器级等距分隔，小元素行内布局需规避基线对齐陷阱。
box-sizing: border-box 是间距可控的前提
不设 box-sizing: border-box，就谈不上“优化间距”——因为默认的 content-box 会让 width 和 height 只管内容区，padding 和 border 全部往外撑，导致实际尺寸不可预测。比如你写 .card { width: 300px; padding: 16px; border: 1px solid #ccc; }，它最终宽 334px，可能直接溢出父容器。
必须全局覆盖，否则局部声明容易遗漏：
*, *::before, *::after {
box-sizing: border-box;
}
注意：box-sizing 对 display: inline 元素无效；IE8+ 原生支持，无需前缀；Flex/Grid 子项虽常表现得像 border-box，但别依赖——显式写上才真正可靠。
padding、margin、border 各司其职，别混用
很多人用 margin 控制按钮内文字离边距离，或用 padding 推开相邻卡片，结果一改字号/断点就错位。根本问题是职责错配：
-
padding属于元素自身：为内容留白，影响背景、圆角、边框渲染，适用于按钮、输入框、卡片内部呼吸感 -
margin属于文档流关系：控制元素与兄弟/父容器的距离，适用于组件之间、区块之间、列表项之间 -
border不只是线：可作视觉锚点（如焦点态）、状态标识（如错误边框），甚至用border: 1px solid transparent预留空间，避免加边框时重排
典型反例：.list-item { margin: 10px; } 用于垂直列表，会导致首尾项外边距合并，实际顶部/底部空白只有 10px 而非预期的 20px。应改为只给上一项设 margin-bottom，或用 BFC 清除折叠。
用 gap 替代 margin 实现容器级等距分隔
在 Flex 或 Grid 容器中，靠给每个子项写 margin-right 或 margin-bottom 来实现间隔，既啰嗦又难维护，还极易漏掉 :not(:last-child) 或写错方向。
gap 是唯一正解：
- Flex 容器：支持
gap（Chrome 63+/Firefox 63+/Safari 14.1+），旧版 Safari 需降级为margin+:not(:last-child) - Grid 容器：完全支持，且
row-gap/column-gap可独立控制 - 绝对不要混用：
gap: 12px+margin: 6px在子项上 = 18px 间距，不是“保险”，是 bug - 响应式慎用
clamp()：Safari 对gap: clamp(...)解析不稳定，建议用媒体查询切换固定值
示例：
.button-group {
display: flex;
gap: 8px;
}
.button-group > button {
flex: 0 0 auto; /* 防止文字变多时被压缩 */
}
小元素行内布局的间距陷阱
图标、徽章、小按钮堆在一起，看似写了 margin: 4px 却上下错位、间隙忽大忽小——这不是 margin 失效，是 display: inline 默认走字体基线（vertical-align: baseline），受 line-height 和父容器字体大小干扰。
可靠方案只有两个：
- 转
inline-block+ 显式vertical-align：font-size: 0消除 HTML 空格，子元素重置font-size，再配margin - 直接上
display: flex：gap统一控制，align-items: center垂直居中，彻底绕过基线问题
兼容性差的场景（如需支持 IE11），padding 比 margin 更稳：它始终作用于自身盒内，不参与折叠，也不受兄弟元素对齐影响。
真正难的不是写对某一行 CSS，而是让 padding/margin/border/gap 在不同嵌套层级、不同 display 类型、不同浏览器中保持行为一致。每次加间距前，先问一句：这是元素“内部”的留白，还是它和“别人”的距离？选错属性，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
