Question

Please check my code at http://jsfiddle.net/TccN5/.

It has a gap between the input text box and the button on the right. For the very same markup on Bootstrap site the input box and the button has a nice tight fit with no gap.

Why do I have the gap?

Answer 1

You have extra whitespace characters between button and input elements. Place button tag immediately after input element:

<input type="text" /><button class="btn" type="button">Any</button>

DEMO1

Or alternatively, apply this css styles:

​.input-append{
    font-size:0;
}​

DEMO2