improve inline-block of append/prepend inputs with font-size: 0;

docs/assets/css/bootstrap.css

@@ -1269,6 +1269,7 @@ textarea::-webkit-input-placeholder {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
+  font-size: 0;
 }
 
 .input-prepend input,
@@ -1280,6 +1281,7 @@ textarea::-webkit-input-placeholder {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
+  font-size: 13px;
   vertical-align: middle;
   -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
@@ -1307,6 +1309,7 @@ textarea::-webkit-input-placeholder {
   height: 18px;
   min-width: 16px;
   padding: 4px 5px;
+  font-size: 13px;
   font-weight: normal;
   line-height: 18px;
   text-align: center;

docs/base-css.html

@@ -965,11 +965,13 @@ For example, <code>section</code> should be wrapped as inline.
   <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
   <form class="bs-docs-example">
     <div class="input-prepend">
-      <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+      <span class="add-on">@</span>
+      <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+      <input class="span2" id="appendedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -985,7 +987,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
   <form class="bs-docs-example form-inline">
     <div class="input-prepend input-append">
-      <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+      <span class="add-on">$</span>
+      <input class="span2" id="appendedPrependedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -998,11 +1002,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
   <form class="bs-docs-example">
     <div class="input-append">
-      <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+      <input class="span2" id="appendedInputButton" size="16" type="text">
+      <button class="btn" type="button">Go!</button>
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+      <input class="span2" id="appendedInputButtons" size="16" type="text">
+      <button class="btn" type="button">Search</button>
+      <button class="btn" type="button">Options</button>
     </div>
   </form>
 <pre class="prettyprint linenums">

docs/templates/pages/base-css.mustache

@@ -896,11 +896,13 @@
   <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p>
   <form class="bs-docs-example">
     <div class="input-prepend">
-      <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+      <span class="add-on">@</span>
+      <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+      <input class="span2" id="appendedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -916,7 +918,9 @@
   <p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
   <form class="bs-docs-example form-inline">
     <div class="input-prepend input-append">
-      <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+      <span class="add-on">$</span>
+      <input class="span2" id="appendedPrependedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -929,11 +933,14 @@
   <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
   <form class="bs-docs-example">
     <div class="input-append">
-      <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+      <input class="span2" id="appendedInputButton" size="16" type="text">
+      <button class="btn" type="button">Go!</button>
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+      <input class="span2" id="appendedInputButtons" size="16" type="text">
+      <button class="btn" type="button">Search</button>
+      <button class="btn" type="button">Options</button>
     </div>
   </form>
 <pre class="prettyprint linenums">

less/forms.less

@@ -380,12 +380,14 @@ textarea {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
+  font-size: 0;
   input,
   select,
   .uneditable-input {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
+    font-size: @baseFontSize;
     vertical-align: middle;
     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
     // Make input on top when focused so blue border and shadow always show
@@ -402,6 +404,7 @@ textarea {
     height: @baseLineHeight;
     min-width: 16px;
     padding: 4px 5px;
+    font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
     text-align: center;