css - 流体テーブルセルdivの余分な空白

Question

私のフィドルを見てください。32x32アイコンの横に入力フィールドを表示しようとしています。何らかの理由で、私のdivの下部にぶら下がっている空白があります。divとimageの両方が32x32pxである必要があります。それが私のブラウザであるかどうかは疑わしいですが、理解できません。

http://jsfiddle.net/WbhgA/1/

これが私が見ているものです

http://i.imgur.com/3C1eN.jpg

Answer 1

入力divに20pxのパディング権があります

それで

.inputHolder {
   display:table-cell;
   width:100%;
   height:32px;
}

ここでフィドルhttp://jsfiddle.net/WbhgA/13/

更新：あのスペース

あなたはそれを垂直に揃える必要があります

.inputHolder {
   display:table-cell;
   width:100%;
   height:32px;
   border:1px solid red; 
   vertical-align: middle;
}

Answer 2

これを試してください-http://jsfiddle.net/WbhgA/15/

.inputHolder {
    height: 32px;
    margin-right: 60px;            
}

.inputHolder input {
    border: 1px solid;
    border-radius: 6px;  
    width:100%;  
    height: 32px;
    line-height: 32px;
}

.icon {
    border: 1px solid red;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    float: right;
    margin-top: -32px;
    background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
}