本文介绍如何利用 CSS Flexbox 的 gap 属性（而非手动设置 margin）实现输入框、标题与按钮之间的均匀垂直间距，提升响应式表单布局的简洁性与可维护性。
本文介绍如何利用 css flexbox 的 `gap` 属性（而非手动设置 margin）实现输入框、标题与按钮之间的均匀垂直间距，提升响应式表单布局的简洁性与可维护性。
在现代 CSS 布局中，gap 是 Flexbox 和 Grid 中专为子元素间留白设计的核心属性，它能替代冗余的 margin-bottom 或 margin-top，避免因父子 margin 折叠或选择器污染带来的样式冲突。你当前的结构已具备 Flex 容器基础（.flex-col + flex-direction: column），但缺少关键的 gap 声明——space-between 并非标准 CSS 类名，也不会生效；真正起作用的是原生 gap。
以下为优化后的完整方案：
✅ 核心修改点：
- 移除无效类名
space-between（它不是 Tailwind 默认类，也非标准 CSS）； - 在父级 Flex 容器上添加
gap-2（对应gap: 0.5rem），统一控制所有直接子元素（banner、输入区、按钮）的垂直间距； - 在内部输入容器（
.flex-col）上同样添加gap-2，确保各<input>之间也拥有等距间隙； - 补充
p-3为输入区域增加内边距，提升视觉呼吸感。
<div class="flex flex-1 flex-col justify-center gap-2 h-screen">
<div class="flex justify-center">
<div class="flex items-center text-white font-bold text-lg">Banner</div>
</div>
<div class="flex flex-1 justify-center bg-gray-700 p-3">
<div class="flex flex-col gap-2 w-full max-w-md">
<input type="text" placeholder="Nome" name="nome" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><input type="text" placeholder="Email" name="email" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><input type="password" placeholder="Senha" name="senha" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><input type="text" placeholder="CPF" name="cpf" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><input type="tel" placeholder="Telefone" name="telefone" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"><input type="date" name="nascimento" class="px-4 py-2 rounded border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="flex justify-center">
<button type="button" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded transition-colors">Click Me!</button>
</div>
</div>
? 注意事项：
-
gap仅作用于 Flex/Grid 容器的直接子元素，嵌套层级需单独设置； - 若需兼容旧版浏览器（如 IE），
gap不被支持，此时应退回到margin方案并配合:not(:last-child)选择器； -
h-screen用于确保外层容器占满视口高度，配合justify-center实现垂直居中； - 推荐为
<input>添加class="w-full"或显式宽度控制（如示例中的max-w-md），防止在窄屏下溢出。
通过合理运用 gap，你不仅能消除重复的 margin 声明，还能让间距逻辑更语义化、更易全局调整——只需修改一处 gap-* 类，整页垂直节奏即可同步更新。
