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

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" />