space-x-4 是 Tailwind CSS 中用于 flex 或 grid 容器内直接子元素间添加 1rem 水平间距的工具类，自动跳过首尾元素的外边距，需配合 flex/grid 布局使用，不可单独作用于 block 元素。
space-x-4 是 Tailwind CSS 提供的间距工具类，专门用于在**同一行内（flex 或 grid 容器中）的直接子元素之间**添加水平间距（即左右 margin），它不会影响第一个子元素的左侧或最后一个子元素的右侧。
必须用在 flex 或 grid 容器上
space-x-4 依赖父容器的布局模式才能生效。它只对 flex 或 grid 容器的直接子元素起作用。如果父元素是普通 block（如 div 默认），space-x-4 不会表现预期效果。
- ✅ 正确：给父容器加
flex或grid类 - ❌ 错误：仅加
space-x-4而不设 display 布局
它自动跳过首尾元素的外边距
space-x-4 实际上是给每个子元素（除第一个外）添加 margin-left: 1rem（Tailwind 中 4 对应 1rem）。所以：
- 第一个子元素没有左 margin
- 第二个及之后的每个子元素都有
margin-left: 1rem - 整体视觉效果就是“子元素之间间隔 1rem”，而非“每个子元素都带左右 padding/margin”
常见写法示例
下面是一个典型的 flex 水平排列按钮组，使用 space-x-4 控制间距：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
<div class="flex space-x-4"><button class="bg-blue-500 text-white px-4 py-2">首页</button>
<button class="bg-blue-500 text-white px-4 py-2">关于</button>
<button class="bg-blue-500 text-white px-4 py-2">联系</button>
</div>
渲染后，按钮之间会有 1rem（通常为 16px）的水平空隙，首尾按钮紧贴父容器边缘。
注意与其他间距类的区别
别混淆这几个常用类：
-
space-x-4：仅子元素间水平 margin（适用于 flex/grid） -
gap-4：flex 或 grid 中通用的间隙控制（推荐新项目优先用 gap） -
mx-4：给单个元素设置左右 margin -
px-4：给单个元素设置左右 padding
gap-4 更现代、语义更清晰，且对 flex 和 grid 都统一支持；space-x-4 是传统兼容写法，仍广泛使用。
