Mystery white space at the bottom of form element

Question

When a form is put inside a div, there's always extra space at the bottom of the form for some reason. How do we get rid of that space?

In the code snippets from stack overflow, it doesn't actually show the space, but anywhere else, it does. The code below is all there is.

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

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

Answer 1

You can refer to web developer tools (F12), and you'll see that a form element comes with a margin-bottom: 1em, as defined in the browser's default stylesheet:

You can override that by defining your own margin rule:

form { margin-bottom: 0; }