表单元素底部的神秘空白答案

【问题标题】：Mystery white space at the bottom of form element表单元素底部的神秘空白
【发布时间】：2016-10-19 07:20:22
【问题描述】：

当一个表单被放入一个 div 中时，由于某种原因，表单底部总是有多余的空间。我们如何摆脱那个空间？

在堆栈溢出的代码 sn-ps 中，它实际上并没有显示空间，但在其他任何地方，它都会显示。下面的代码就是全部了。

div {
  border: 1px solid blue;
}
form {
  border: 1px solid red;
}

<div>
  <form>
    Form
  </form>
</div>

【问题讨论】：

如果您无法在此处复制它，我们将无能为力。我的疯狂猜测是您在 css 中的某处定义了一些边距。您可以使用开发人员工具检查计算的 css 并查看此边距/填充来自何处
或者它可能是您浏览器默认样式的一部分。您可能需要考虑进行 CSS 重置。
@ItayGal 代码都在这里。当它没有在其他任何地方更正时，它只是用 stackoverflow 的 sn-p 来纠正这样的事情。这是有问题的页面的链接：chatwithibot.com/testx.php
@ItayGal 你可以从源代码中看到代码本身就是这样。

【解决方案1】：

您可以参考 Web 开发人员工具 (F12)，您会看到 form 元素带有 margin-bottom: 1em，如 browser's default stylesheet 中所定义：

您可以通过定义自己的保证金规则来覆盖它：

form { margin-bottom: 0; }

【讨论】：

【解决方案2】：

您有一个margin-bottom: 16px。删除它，它会解决你的问题。

【讨论】：