Secret white space at the bottom of a form element

Question

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

In the code snippets from it does not actually show a space, but somewhere else. 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 turn to the web developer tools (F12) and you will see that the form element comes with margin-bottom: 1em , as defined in the default stylesheet :

You can override this by specifying your own field rule:

 form { margin-bottom: 0; } 

Answer 2

You have margin-bottom: 16px . Remove it and it will solve your problem.