title: twitter bootstrap prepend, append vertical misalignment
body: <p>Prepends and appends are off by about 3 pixels (the prepended and appended span is low)</p>
  
  <p>Here's my markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
              &lt;form class="well"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="txtLot_Original_Cost"&gt;Original Cost&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-prepend"&gt;
                              &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2 numAlign" name="txtLot_Original_Cost" id="txtLot_Original_Cost" size="16" type="text"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The markup is in a very simple page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
          &lt;link rel='stylesheet' href='/stylesheets/bootstrap.css' /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;%- body %&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can override the problem with the following css:</p>
  
  <pre><code>.input-prepend .add-on {
      margin-right: -1px;
      position:relative;
      bottom:2px;
  }
  </code></pre>
  
  <p>But I wonder what other side effects this will create.</p>