CSS间距应使用rem定义语义化变量，如--spacing-xs:0.25rem；工具类需带方向（m-t-md）；禁用通配符重置；响应式通过根字体缩放驱动，保持语义一致性。
用 CSS 自定义属性统一内外边距值
直接在 :root 里定义一套间距尺度，比硬写像素或反复复制粘贴更可控。所有组件、布局、卡片、表单都能复用同一套语义化数值，改一处全盘响应。
常见错误是把 --spacing-xs 定成 4px 却在按钮内边距用 padding: var(--spacing-xs)，结果文字被压扁——因为没考虑行高与内容尺寸的匹配关系。
-
--spacing-xs推荐设为0.25rem（即 4px），适合图标间距、小分割线 -
--spacing-sm用0.5rem（8px），适合按钮内边距、输入框垂直留白 -
--spacing-md用1rem（16px），是卡片 padding、模块间 margin 的主力值 - 避免用
px直接定义变量，否则无法响应缩放或 root font-size 变更
:root {
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
}
<p>.card {
padding: var(--spacing-md);
}</p><p>.btn {
margin: var(--spacing-sm) 0;
padding: var(--spacing-sm) var(--spacing-md);
}工具类命名要带方向且可组合
只写 .m-2 这种抽象缩写，在团队协作或半年后回看时根本不确定是上下还是四边，也搞不清 2 对应几像素。必须让类名本身携带语义和方向。
典型翻车场景：给一个弹窗加 .p-4，结果整个弹窗变大溢出视口——因为没意识到这个工具类作用于弹窗容器自身，而不是其子内容区。
立即学习“前端免费学习笔记（深入）”；
- 用
m-t-{size}/p-l-{size}明确方向，比如m-t-md、p-l-sm - 允许叠加：同时需要上边距和右边距？直接写
m-t-md m-r-sm - 不提供
m-auto类——居中逻辑不该混在间距工具里，该用margin-inline: auto或 flex justify-content - 工具类只覆盖常用组合，别搞出
m-b-xxs这种过度细分
.m-t-xs { margin-top: var(--spacing-xs); }
.m-b-md { margin-bottom: var(--spacing-md); }
.p-l-sm { padding-left: var(--spacing-sm); }
.p-r-lg { padding-right: var(--spacing-lg); }慎用通配符重置 padding/margin
全局写 * { margin: 0; padding: 0; } 看似省事，实则埋雷：表单控件失去默认内边距，button 文字紧贴边缘，textarea 光标卡在左上角，第三方 UI 库样式大面积错位。
真正需要的是“有控制的归零”——只对明确参与布局流的容器做重置，而非所有元素一刀切。
- 重置仅限布局容器：
div、section、article在特定上下文（如 Grid/Flex 子项）中可清 margin - 保留表单元素、文本级元素（
p、h1）、媒体元素（img、video）的浏览器默认间距 - 用
all: unset比通配符更危险，它连display和font都干掉，几乎必然导致渲染异常
响应式间距不能只靠媒体查询写死
在移动端把所有 --spacing-md 改成 0.75rem 听起来合理，但实际会破坏密度节奏：标题间距缩了，按钮内边距也缩了，可图标和文字大小没变，视觉拥挤感反而加剧。
更稳妥的做法是分层响应：基础字号缩放驱动间距，再叠加局部微调。
- 让
html的font-size在小屏下变为14px，则所有rem单位自动收缩 - 若需额外压缩某区块，单独加类如
stack-sm调整子元素间隙，而非全局降档 - 避免在媒体查询里重复定义全部 spacing 变量，只覆盖必要项，例如：
@media (max-width: 480px) { :root { --spacing-md: 0.75rem; } }
最易被忽略的是「语义一致性」：同一个 --spacing-md 在卡片 padding、列表项 margin、模态框内边距中，必须传递相同的空间意图。一旦开始为某个组件偷偷加 +2px 偏移，整套系统就滑向不可维护。
