space-y-4在块级流中无效，因p标签默认margin会折叠；应改用gap（Flex/Grid）或padding（父容器）绕过margin collapse机制。
Tailwind 没有叫 space-between 的类，也**不能直接解决 margin collapsing（外边距重叠）问题**。这是两个完全不同的机制：`space-x`/`space-y` 是布局工具类，而 margin collapsing 是 CSS 原生盒模型行为。强行套用会误判根源、白调样式。
为什么 space-y-4 加了却没拉开两个 p 标签的间距？
这不是类名写错了，而是你正踩在 margin collapsing 的典型陷阱里：p 是块级元素，默认上下 margin 会折叠——比如两个 p 各带 mb-4 和 mt-4，实际间距仍是 1rem（取最大值），不是 2rem。
- 别指望
space-y-4对纯块级流内元素生效：它只作用于「相邻兄弟元素」且依赖父容器是普通文档流（display: block），但前提是子元素不能自带 margin（否则和 collapse 冲突） - 真正起效的前提是：父容器没 border/padding，子元素又恰好是第一个/最后一个——这时 collapse 会让
space-y的 margin-left/-right 逻辑失效 - 浏览器 computed 样式里如果看到
margin-top: 1rem和margin-bottom: 1rem同时存在但间距没变，基本就是 collapse 在作祟
想避开 margin collapse，该用 gap 还是 padding？
gap 和 padding 是唯二能绕过 collapse 的可靠方式，但适用场景不同：
-
gap只对flex或grid容器有效：加flex gap-4后，子元素间间距由容器统一控制，完全不走 margin 流程 -
padding属于父容器内部节奏：给卡片容器加py-6，再让子元素去掉mt/mb，视觉间距就稳定可控 - 别混用：在
flex容器里同时写gap-4和space-y-4，会导致双倍间距（gap + margin-left 叠加） - 响应式慎用：写
md:gap-6前，必须先设基础值如gap-4，否则小屏下 gap 为 0，collapse 立刻回归
哪些操作会让 margin collapse “意外复活”？
即使你用了 gap 或 padding，以下情况仍可能触发 collapse，导致间距忽大忽小：
- 父容器是
ul/ol：浏览器默认加了margin-block，和子项mt折叠，需显式写my-0 - 子元素用了
float或position: absolute：脱离文档流后，collapse 规则失效，但 spacing 类也失效，布局反而失控 - 动态渲染内容（如 React 中条件渲染）：第一个子元素被移除后，原第二项变成首项，它的
mt又和父容器 collapse，间距消失 - Tailwind 的
prose插件：段落p默认带margin，且插件内部已处理 collapse；若手动加mt-4，反而破坏原有节奏
真正麻烦的从来不是“选哪个类”，而是 collapse 的隐性触发条件（无 border/padding 的空父容器）、spacing 类的生效前提（display 模式+文档流）、以及响应式断点的覆盖逻辑——这三层约束不同时满足，任何 spacing 工具类都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
