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.