VisualBean VisualBean - 3 months ago 16
HTML Question

bootstrap input-group 1px misallignment between addon and input

I have the following html - using Bootstrap

<div class="input-group" style="width:100px;">
<span class="input-group-addon glyphicon glyphicon-time" ></span>
<input type="text" class="form-control" placeholder="Time">
</div>


which produces the following very annoying output

enter image description here

A very annoying 1-2px aligning difference between input and addon - and I cannot for the life of me figure out why this is.
Can be seen in this fiddle

Answer

the ' .glyphicon ' has a top 1 px put it in 0, as .glyphicon {top: 0px}