Bootstrap input group 1px diference

Question

I use input-group in modal dialog. And the button is 1px less then other elements. How can I fix it, more then less why I have this bug? I use Bootstrap 3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="buttons input-group col-sm-offset-1 col-sm-9">
    <input type="number" min="1" value="1" class="form-control" />
    <span class="input-group-addon">ks</span>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
    </span>
</div>

Answer 1

For me, the bug was because of a rounding error.

there's this style rule

.btn {
    line-height: 1.42857;
}

which should be

.btn {
    line-height: 1.42857143;
}

Turns out importing bootstrap within other SASS files resulted in a loss of precision. The SASS compile process needed the flag --precision 8 to work correctly.

For you, though, as noted in another answer, you just need to put your icon in another tag.

<span class="input-group-btn">
    <button type="button" class="btn btn-default color-red">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
</span>