I can't remove the margin between two input fields

Question

I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/

I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.

Answer 1

The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.

Magic.

form {
    font-size: 0;
}

form input {
    font-size: 12px;

Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.

Answer 2

This is how elements function as inline-block.

Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.

If you want to remove the space completely, you can float the elements.

float: left;

You can also remove the whitespace from your template document. Like so:

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />