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 用户：gr

  

  ep 项目中 $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 变量。