形式元素底部的神秘白色空间

Question

当表单放在div中时,由于某种原因,表单底部总会有额外的空间.我们如何摆脱那个空间？

在堆栈溢出的代码片段中,它实际上并不显示空间,但在其他任何地方,它都会显示空间.下面的代码就是全部.

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

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

Answer 1

您可以参考 Web 开发人员工具 (F12)，您会看到一个form元素带有margin-bottom: 1em，如浏览器默认样式表中所定义：

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

form { margin-bottom: 0; }

Answer 2

你有一个margin-bottom: 16px。将其删除即可解决您的问题。