why is there space between controls if margin and padding are set to 0?

I have a div containing two input elements of type text and a label between them. It is for the user to define an interval (like 4 - 5)开发者_如何学运维. They display on the same line. All three controls have margin and padding set to 0. Firebug confirms that. Still there is some space between them. How come ? Where does this space come from ?

It could very well be whitespace (newlines / spaces) between the elements.

see these examples to understand

<input type="text" /><label>-</label><input type="text" />

and

<input type="text" /> <label>-</label> <input type="text" />

or

<input type="text" />
<label>-</label>
<input type="text" />

will render differently.

demo: http://jsfiddle.net/rS2QQ/

White space in your HTML file.

Make sure you don't have any whitespace between your inputs:

<input /> <input />
         ^
         |
         \_ space

Also, hyphen character always has some whitespace around it. You can specify negative letter-spacing in your CSS or add some negative margins.