Whitespace between HTML input and button

Question

I wanted a button next to my input box so I did the following.

<div>
    <input/>
    <button>Do something</button>
</div>

This gave a small gap between the input and the button.

To my surprise this didn't

<div>
    <input/><button>Do something</button>
</div>

My question is:

I assume the gap is deliberate and represents the white space for my newline. Is this assumption correct and is there some good practise for avoiding the problem? Can I style out the gap, or should I just stick to putting the tags on the same line?

I've tried to represent my question here http://jsfiddle.net/jonnymoo/2wzdzfan/5/

<div>
    <input value="look no gap between me"/><button>and me</button>
</div>
<div>
    <input value="But there is here"/>
    <button>and here</button>
</div>
<div>
    Is it just the same as me
    and me?
</div>

Ah ha - yes it is the same question as noted by Vucko and Paulie_D, just with different html tags! Thanks for pointing it out. — Jonny, Nov 04 '15 at 12:55

score 1 · Accepted Answer · answered Nov 04 '15 at 12:49

Add font-size:0; to the surrounding div like this:

.no-gap {
  font-size:0;  
}

<div>
    <input value="look no gap between me"/><button>and me</button>
</div>
<div class="no-gap">
    <input value="But there is here"/>
    <button>and here</button>
</div>
<div>
    Is it just the same as me
    and me?
</div>

Whitespace between HTML input and button

1 Answers1