1px Input Group

Question

I am using an input group in a modal dialog box. And the button is 1px smaller than the other elements. How can I fix this, and even more so, why do I have this error? I am using 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>

Run codeHide result

Answer 1

For me, the error was caused by a rounding error.

this style rule exists

.btn {
    line-height: 1.42857;
}

which should be

.btn {
    line-height: 1.42857143;
}

Turns off boot import in other SASS files, resulting in loss of precision. For the SASS compilation process, the checkbox --precision 8worked correctly.

For you, however, as indicated in another answer, you just need to put the icon in a different tag.

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

Answer 2

, , - , /.

; :

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

- .

Answer 3

This is caused by using the glyphicon on the button and seems to be a bootstrap error. Use

 .input-group-btn>.glyphicon {margin-top: -1px;}

to fix it.

http://fiddle.jshell.net/85m5mwsg/2/

Answer 4

Remove top .glyphicon

http://jsbin.com/dufisukefe/3/edit

.input-group-btn .glyphicon
{
top :0px
}