Input-group-addon in Bootstrap 3 is smaller than the input-group-sm option

Question

In bootstrap 3, I would like to make the input and input-group-addon that are smaller than the input-group-sm parameter. I can get my input at 20 pixels, but unfortunately, when I do this, I find that the input-group-addon always ends in a pixel or two more than the input itself.

Here is jsfiddle ...

http://jsfiddle.net/stazna01/U6MJe/1/

<div class="input-group input-group-sm input" style="width: 200px; height: 20px; margin: 100px auto;"> <input type="text" class="form-control" placeholder="Search" style="height: 20px; padding: 0; margin: 0;" /> <span class="input-group-addon" style="height: 20px; padding: 0 4px; margin: 0;"> <span class="glyphicon glyphicon-search"></span> </span> </div> 

Answer 1

Try changing the coordinates of the window sizes:

 input, span { box-sizing: content-box; -moz-box-sizing: content-box; } 

http://jsfiddle.net/isherwood/U6MJe/6

Answer 2

this example does not work for 18px height

 <div class="input-group input-group-sm input" style="width: 200px; height: 18px; margin: 100px auto;"> <input type="text" class="form-control" placeholder="Search" style="height: 18px; padding: 0; margin: 0;" /> <span class="input-group-addon" style="height: 18px; padding: 0 4px; margin: 0;"> <span class="glyphicon glyphicon-search"></span> </span> 

http://jsfiddle.net/drps/Bxm5x/2/ Also, firebug tells me that the actual span element height in your example is 20.3667px