HTML Forms Problem - Adds a line after it ends

Question

<td>
    <form name="search_form" action="" method="POST">
    <input type="text" name="search_text">          
    <input type="submit" name="search_bt" value="Go">
    </form>
</td>

now when ever we use this code it adds an extra line after it ends.... see the image below see the red boxed area... there is nothing there... nothing but that space is added for no reason by the FORM

BUT... BUT.. if i use the code like this

<form name="search_form" action="" method="POST">
<td>

    <input type="text" name="search_text">          
    <input type="submit" name="search_bt" value="Go">

</td>
</form>

everything is fine... the space disappears..

WHY SIRE !!!! WHYYYYYYYYYYYYYYYYYY

Answer 1

thats just the way most browsers treat the form element

use css padding/spacing to tell it that it shouldnt added extra space for form elements.

Answer 2

Oddly enough, form elements have CSS styling attached to them. Margins, padding, etc. That's why.

Answer 3

in your css file just add

form {
  margin: 0;
  padding: 0; 
}

and you'll be fine.

Answer 4

This page has a good write-up on what's occurring.

http://www.cs.tut.fi/~jkorpela/forms/extraspace.html

Browsers typically leave some empty space, roughly corresponding to one empty line, after a form. The problem discussed here is often classified as “extra vertical space after a submit button”, but this is not the correct diagnosis. Rather, it’s about spacing below the entire form, but it is observed especially often when a form contains just an input button (often inside a table cell.