title: Robust vertical alignment of both box and baseline using line-height?
body: <p>When setting the same line-height, height and box-sizing: border-box on elements in a line, I'd expect them to align vertically (both at the baseline and the box) properly.</p>
  
  <p>No luck: alignment seems to always be off by one pixel for some combination of input/span and/or with-border/without-border. </p>
  
  <p>See below or <a href="http://jsfiddle.net/xcgyh22q/9/" rel="nofollow noreferrer">http://jsfiddle.net/xcgyh22q/9/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input, span {
      display: inline-block;
      box-sizing: border-box;
      padding: 0;
      height: 22px;
      line-height: 22px;
      
      border: none;
      background-color: gray;
     
      font-family: Arial, sans-serif;
      font-weight: normal;
      font-size: 14px;
      
      width: 40px;
  }
  input {
      background-color: #A6A6A6;
  }
  
  .border {
      border: 1px solid black;
  }
  
  .vmiddle {
      vertical-align: middle;
  }
  
  
  p {
      margin: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h4&gt;Two spans&lt;/h4&gt;
  One span has border - fail...
  &lt;p&gt;&lt;span&gt;_asd_&lt;/span&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  One span has border - fail...
  &lt;p&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;span&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  Both spans have border - success
  &lt;p&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  
  &lt;h4&gt;One input, one span - not the same&lt;/h4&gt;
  No borders - success
  &lt;p&gt;&lt;input type="text" value="_asd_"/&gt;&lt;span&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  span has border - fail...
  &lt;p&gt;&lt;input type="text" value="_asd_"/&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  input has border - success ...
  &lt;p&gt;&lt;input type="text" value="_asd_" class="border"/&gt;&lt;span&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  Both elements have border - fail :(
  &lt;p&gt;&lt;input type="text" value="_asd_" class="border"/&gt;&lt;span class="border"&gt;_asd_&lt;/span&gt;&lt;/p&gt;
  vertical-align: middle messes up baseline alignment
  &lt;p&gt;&lt;input type="text" value="_asd_" class="border vmiddle"/&gt;&lt;span class="border vmiddle"&gt;_asd_&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(tested in chrome - seems to vary a bit in other browsers)</p>
  
  <p>Am I missing something obvious or is there no good general solution? I don't want to use padding since that comes with its own set of challenges.</p>
  
  <p>Seems like the pixels above/below the baseline is distributed differently depending on the element type and whether the element has borders. I can understand the mixed-border case, but it's really annoying that input doesn't behave the same way as span. (see span-input, both with borders)</p>