Gap between label and <select> - why?

Question

There is a small gap between <label>Title</label> and <select> field, I could not figure out what is causing this?

Visit http://jsfiddle.net/xrvbv/6/ and you will notice <select> is not align properly.

CSS:

.FormStyle label {
 display: inline-block; 
 width: 130px;
 text-align: right;
 padding-right: 7px;
 font-size: 11px;
 color: #666;
 font-weight: bold;
}

.FormStyle input[type="text"], .FormStyle textarea {
 padding: 3px;
 display: inline-block;
 width: 290px;
 border: 1px solid #BDC7D8;
 border-image: initial;
 margin: 0px;
 font-size: 12px;
}


.FormStyle li {
 padding: 3px;
 margin-bottom: 1px;
}


.FormStyle {
 margin: 5px 0px 0px;
 padding: 0px 0px 10px;
 list-style-type: none;
 border-bottom: 1px solid #E5E5E5;
}​

HTML

<ul class="FormStyle">
    <li>
        <label>First Name</label><input type="text" value="" name="firstname">    
    </li>

    <li>
        <label>Second Name</label><input type="text" value="" name="secondname">    
    </li>
    <li>
       <label>Title</label>
        <select name="title">
            <option> Mr </option>
            <option> Mrs </option>
            <option> Ms </option>
            <option> Miss </option>
            <option> Dr </option>
        </select>
    </li>
</ul>​

Answer 1

It's caused by the whitespace. Change to

<label>Title</label><select name="title">

and you will see the gap disappear.

If you really want to keep your lines separate, you could use comments, as suggested below, or move the closing label's >:

   <label>Title</label
        ><select name="title">

I don't think either solution is good, and you're just wasting bandwidth sending whitespace you don't want or need.

Answer 2

That's because there is a newline and a tab between the label and the select. If you put the tags on the same line and remove the tab, the gap will disappear.

↪ View this at JSFiddle

It is a feature of HTML that all white space is treated identically. Any sequence of white-space characters is treated as a single space.

(Quote via: http://www.maproom.co.uk/invis1.htm)

To prevent the gap from appearing while maintaining the indentation, you can use either of the following tricks:

1. Moving the > of the label tag to the next line. Although this is valid HTML, this may be confusing and not what you want.
2. Commenting out the whitespace between the tags (by placing it between <!-- and -->).
   Both of these options are wasting bandwidth.
3. Putting the whitespace between tags for your server-side programming language, for example <?php /*whitespace*/ ?>. This may cause a low increase in server load.

All of these options are confusing and probably not what you want, so I'd recommend simply leaving out the whitespace.