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>

If you can't reproduce it here than we can't help. My wild guess is that you have some margin defined somewhere in your css. You can use the developer tools to check the computed css and see where this margin/padding come from — Itay Gal, Oct 18 '16 at 22:54
Or it could be part of the default styles for your browser. You may want to look into doing a CSS reset. — Jacob, Oct 18 '16 at 22:56
@ItayGal The code is all here. It's just something with stackoverflow's snippet that correct things like that, when it's not corrected anywhere else. Here's a link to the page with the problem: http://chatwithibot.com/testx.php — frosty, Oct 18 '16 at 23:04
@ItayGal You'll be able to see from the source code that that's all there it is to the code itself. — frosty, Oct 18 '16 at 23:05

score 6 · Answer 1 · answered Oct 18 '16 at 23:15

6

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; }

answered Oct 18 '16 at 23:15

Michael Benjamin

346,931
104
581
701

score 0 · Answer 2 · answered Oct 18 '16 at 23:06

0

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

answered Oct 18 '16 at 23:06

Itay Gal

10,706
6
36
75

That must be by default. Because I didn't define it in the HTML. – frosty Oct 18 '16 at 23:07
You can do a CSS reset and define all the paddings/margins. http://cssreset.com/what-is-a-css-reset/ – Itay Gal Oct 18 '16 at 23:09

Mystery white space at the bottom of form element

2 Answers2