Bootstrap 5怎么去掉表单默认的外边距-Bootstrap教程-PHP中文网

form 标签默认无 margin，所谓外边距实际来自子元素（如 mb-3、mt-2 类）、父容器或浏览器残留样式；应通过开发者工具定位并清理相关间距类，而非给 form 添加 m-0。

bootstrap 5怎么去掉表单默认的外边距

form 标签默认没有 margin，问题通常出在子元素上

Bootstrap 5 的 <form></form> 元素本身不带任何 margin 或 padding，默认是「裸容器」。你看到的「表单有外边距」，几乎全是下面这些元素造成的：

<div class="mb-3"> 这类间距工具类（常见于 <code><div> 包裹的 <code><label></label> + <input>）
<label></label> 或 <input> 自身被其他类（如 mt-2、mb-4）加了上下间距
父容器（比如 <div class="container"> 或自定义 wrapper）带了 padding/margin<li>浏览器默认样式残留：某些旧项目或重置不全时，<code><form></form> 可能继承了 margin-top: 1em（极少见，但 DevTools 里能一眼看到）

如何快速定位真实来源

别猜，直接打开浏览器开发者工具（F12），选中你的 <form></form> 元素，看右侧「Computed」面板里的 margin-top 和 margin-bottom 值。再点开「Styles」标签页，逐条检查哪些 CSS 规则在起作用：

如果看到 .mb-3、.mt-4 等类名 → 去 HTML 里删掉它们
如果看到 body > form { margin-top: 1em } 这类规则 → 检查是否引入了未清理的 normalize.css 或自定义 reset
如果看到 .container 或 .row 的 padding/margin 影响了视觉位置 → 问题不在 form，而在布局容器

安全清除表单内部垂直间距的写法

如果你确实想让整个表单内部控件「紧凑排列」，不要给 <form></form> 加 m-0（它没用），而是统一控制子项：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

移除所有 mb-* / mt-* 类，改用 mb-0 显式归零（比删类更可控）
对 <label></label> 和 <input> 等控件，可加 my-0 或 mb-0，避免影响行内对齐
若用了 <div class="form-group">（非 Bootstrap 5 官方类，多见于迁移项目），直接删掉这个 div，改用语义化结构<li>需要全局收紧？可在 Sass 中重定义 <code>$spacers，但仅建议长期项目做，临时调整优先动 HTML 类

示例修正：

<!-- ❌ 默认带 mb-3，底部多出 1rem -->
<div class="mb-3">
  <label class="form-label">Email</label>
  <input type="email" class="form-control">
</div>
<p><!-- ✅ 紧凑版 -->
</p><div class="mb-0">
<label class="form-label mb-0">Email</label>
<input type="email" class="form-control mb-0">
</div>