title: Different gap width in Chrome and IE
body: <p>This is my HTML and CSS code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;asp:TextBox ID="txtSearchMain" runat="server" CssClass="text-box" /&gt;
  &lt;asp:ImageButton ID="imbSearchMain" runat="server" ImageUrl="~/Resources/Images/icon-search.png" CssClass="custom-text-box-img" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.text-box {
      border: 1px solid #CFCFCF;
      padding: 4px;
      margin: 0;
      height: 16px;
  }
  
  .custom-text-box-img {
      border: 1px solid #CFCFCF;
      height: 18px;
      padding: 3px;
      vertical-align: bottom;
      margin-left: -3px;
      background-color: white;
  }
  </code></pre>
  
  <p>Output of this code behaves differently on Chrome and IE</p>
  
  <p><img src="https://i.stack.imgur.com/i6fLC.png" alt="enter image description here"></p>
  
  <p>Output of chrome is as expected, while the IE has a different size gap between two controls.</p>
  
  <p>How to fix this to behave similarly in different browsers?</p>