表单元素底部的神秘空白

Question

当表单放在div中时，由于某种原因，表单底部始终有额外的空格。我们如何摆脱那个空间？

在堆栈溢出的代码片段中，它实际上并没有显示空间，但在其他任何地方，它确实显示了空间。以下代码就是全部。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以参考网络开发人员工具（F12），您会看到form元素附带margin-bottom: 1em，browser's default stylesheet中定义了<{1}}：

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

form { margin-bottom: 0; }

Answer 2

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