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

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

Answer 2

That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:

form {
    font-size: 0;
}

Answer 3

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 4

One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:

<form id="search" method="get" action="http://beta.linksku.com/">
      <input type="text" name="s" tabindex="2"><!--
  !--><input type="submit" value="Go!" class="btn">
</form>

Answer 5

Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:

<form id="search" method="get" action="http://beta.linksku.com/">
        <input type="text" name="s" tabindex="2">
        <input type="submit" value="Go!" class="btn">
      </form>

becomes:

<form id="search" method="get" action="http://beta.linksku.com/">
        <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
      </form>