使用Bulma的spacing工具类可统一表单控件间距，推荐在field容器或输入元素上添加一致的mb类（如mb-3或mb-5），结合field和control结构优化布局，并通过mb-0清除默认样式干扰，确保整体一致性。
表单控件间距不统一是前端开发中常见问题，尤其在使用原生表单元素时，不同控件如 input、select、textarea 默认样式存在差异。Bulma 提供了一套基于 Flexbox 的响应式布局系统和丰富的 spacing 工具类，可以快速统一表单控件之间的间距。
使用 Bulma 的 spacing 工具类
Bulma 提供了 margin 和 padding 的辅助类，命名规则为：mb-{size}（下边距）、mt-{size}（上边距）等，其中 size 范围从 0 到 6，对应不同的间距层级。
要统一表单控件的垂直间距，推荐给每个控件添加一致的下边距：
-
mb-3：添加中等下边距（默认约 0.75rem） -
mb-4：稍大一些的间距，适合大多数表单布局 - 设置
mb-0可清除默认间距，便于重新控制
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div class="field">
<label class="label">姓名</label>
<div class="control">
<input class="input mb-3" type="text" placeholder="请输入姓名">
</div>
</div>
<div class="field">
<label class="label">邮箱</label>
<div class="control">
<input class="input mb-3" type="email" placeholder="请输入邮箱">
</div>
</div>
<div class="field">
<label class="label">备注</label>
<div class="control">
<textarea class="textarea mb-3" placeholder="请输入备注"></textarea>
</div>
</div>
结合 field 和 control 容器优化布局
Bulma 的 field 类本身支持响应式堆叠布局，配合 mb- 类能更精细控制整体结构。
若希望整个 field 之间保持统一间距，可直接在 field 容器上应用 margin 类：
<div class="field mb-5">
<label class="label">选择城市</label>
<div class="control">
<div class="select">
<select>
<option>北京</option>
<option>上海</option>
</select>
</div>
</div>
</div>
这样所有 field 块级元素之间的间距就完全一致，无需单独处理每个输入框。
移除默认样式干扰
某些浏览器会为表单元素添加默认外边距或内边距，影响一致性。可通过以下方式重置：
- 确保使用 Bulma 的 CSS 正常加载
- 避免自定义全局
input, select的 margin/padding - 必要时添加
mb-0显式清空默认间距，再用工具类重新设置
基本上就这些。通过合理使用 Bulma 内置的 spacing 类（如 mb-3、mt-2），并作用于 field 或 control 层级，能快速实现表单控件间距的统一，无需编写额外 CSS。关键是选择一个合适的间距层级并在整个表单中保持一致。
