Tailwind 的 space-x- 在 Flex 容器中失效，因其依赖相邻兄弟元素的 margin-right，而 Flex 子项不参与文档流间距计算；应改用 gap 或检查 display 值。
为什么 Tailwind 的 space-x- 在 Flex 容器里失效
因为 space-x- 依赖相邻兄弟元素的 margin-right，而 Flex 容器中子元素默认不换行、不触发文档流间距逻辑——它只对 display: block 或正常流内兄弟元素起作用。如果你在 flex 容器里套了 space-x-4 却没反应，大概率是这个原因。
实操建议：
- 改用
gap：Flex 或 Grid 容器直接加gap-4，语义清晰且原生支持 - 避免混用：别在同一个容器上同时写
flex space-x-4，space-x-会被忽略 - 检查父容器 display 值：用浏览器 DevTools 看是否意外被覆盖为
inline-flex或其他非标准值
Bootstrap 5 的 mb-3 和 mt-3 在卡片内叠加出双倍间距
这是典型 margin 折叠（margin collapse）现象：垂直方向相邻块级元素的上下 margin 会取最大值，但当父容器有 padding 或 border 时，折叠可能失效，导致子元素 margin 实际生效两次。
常见于 .card > .card-body > p 这类嵌套结构。你加了 mb-3，又在 .card-body 里加了 pt-3，视觉上就显得松散。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用 padding 控制容器内部节奏，比如给
.card-body设py-4，子元素去掉mt-/mb- - 需要精确控制时，用
ms-3/me-3（水平 margin）替代，避开垂直折叠干扰 - 临时禁用折叠：给父容器加
overflow: hidden或border: 1px solid transparent（仅调试用）
修改 CSS 框架变量后，部分组件间距没更新
不是所有框架都把所有间距映射到单一变量集。比如 Bootstrap 5 的 $spacers 控制 mt-/p- 系列，但 .btn-group 内部按钮间距由 $btn-group-btn-spacing-y 单独定义；Tailwind 的 theme.spacing 影响 gap 和 space-，但 prose 插件的段落间距走的是独立 typography 配置。
实操建议：
- 查文档关键词：搜索 “spacing scale”、“button group spacing”、“prose spacing” 等具体组件名 + spacing
- Tailwind 用户：确认是否启用了
plugins: [require('@tailwindcss/typography')]，并检查theme.typography是否覆盖了默认间距 - Bootstrap 用户：grep 项目中
$btn-group、$list-inline、$breadcrumb等变量，它们各自控制特定组件间距
想统一全站组件间距，但工具类太多记不住
靠手动加 mx-2、py-1、gap-3 很难保持一致性，尤其多人协作时。真正可控的方式是封装一层语义化类名，而不是堆砌工具类。
实操建议：
- Tailwind：在
theme.extend.container里定义components，比如.section { @apply py-12 md:py-20; }，然后全局复用section - Bootstrap：用 SCSS 自定义 class，如
.ui-stack { > * + * { margin-top: $spacer * 1.5; } }，比满屏mt-4更易维护 - 警惕“间距即样式”的陷阱：按钮内 icon 和文字间距、表单控件和 label 间距，这些应由组件自身控制，不该靠外部
ms-2强行调整
最常被忽略的一点：组件库（比如 Headless UI、Mantine）自带间距逻辑，强行用工具类覆盖反而破坏设计系统一致性。先看它有没有 spacing prop 或 size 配置项，再决定要不要动 CSS 变量。
