html - 表单元素底部的神秘空白

Question

当将表单放入 div 中时，出于某种原因，表单底部总会有额外的空间。我们如何摆脱那个空间？

在 stack overflow 的代码片段中，它实际上并没有显示空格，但在其他任何地方都显示了。下面的代码就是全部。

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

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

Answer 1

你可以引用网页开发者工具(F12)，你会看到一个form元素带有一个margin-bottom: 1em，定义在browser's default stylesheet :

您可以通过定义自己的 margin 规则来覆盖它:

form { margin-bottom: 0; }