add-on height is not adjusting while joining with input box

Question

I am using input group add-on at the front of the input box. While fixing it, the height of the add-on is getting little higher than the box. How to fix the addon to the size of input box?-

 <div class="form-group">
                <div class="input-group">
                        <div class="input-group-addon">
                            <i class="icon-home"></i>
                        </div>
                    <input class="form-control" type="text" placeholder=" ">
                </div>
            </div>

Answer 1

The default image used for the addon is having a bigger height. So, to match it with the input box I have changed the same image into an appropriate size.

Use this image in its place http://i.imgur.com/sCrdOXO.png

Check the FIDDLE

Work with the code in the following way:

.icon-home {
   background:url('http://i.imgur.com/sCrdOXO.png') no-repeat;
   width:23px;
   height:22px;    
   display:block;
}

.input-group-addon {
   display:block;
   float:left;
}

#input_css {
   display: inline;
   margin-top:0px;
}

Hope this answers your question