title: Remove gap between input and span tags
body: Hi,
  
  <p><strong>EDIT</strong>:I followed the suggestions that had been mentioned in the following comments.Then,Its working in IE well,but problem still persists in Google Chrome...Could somebody help me....<em>Here is the code that came after changes</em><br/></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;style&gt;
    .inputBox{
     white-space:nowrap;
      font-size:0;
    }
     .inputBox input{
      border:1px solid #9AAABD;
      box-shadow:inset 0px 1px 3px #b7c2d0;
      float:left;
     }
     .iconHolder{
      background:#fff url('ComboBoxArrow_regular.png') 50% 50% no-repeat;
      width:12px;
      height:19px;
      line-height:12px;
      font-size:16px;
      float:left;
  }
    .iconHolder:hover{
       background:#007DC0 url('ComboBoxArrow_hover.png') 50% 50% no-repeat;
    }
    &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;span class="inputBox"&gt;
      &lt;input type="text"&gt;
      &lt;span class="iconHolder"&gt;&lt;/span&gt;
    &lt;/span&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are the two images:
  <img src="https://i.stack.imgur.com/huYOx.png" alt="ComboBoxArrow_hover"><img src="https://i.stack.imgur.com/6w5pi.png" alt="ComboBoxArrow_regular"><br/></p>
  
  <p>I want to develop a drop down list box.I am using input filed and a <code>&lt;span&gt;</code> tag which will hold the <code>down arrow icon</code> to get the list box look.<br/>
   The problem is there is an unnecessary gap between input field and span which is really ugly.Can that gap be removed? <a href="http://jsfiddle.net/L7Vax/" rel="nofollow noreferrer">Here</a> is the sample application. Here I used <code>V</code> for test purpose but actually there should be an image.</p>
  
  <p><strong>Note</strong>: The span's height should be equal to input's tag,And if we change the resolution of the browser thier alignment should not be distorted....</p>
  
  <p>Thanks in advance</p>