input 和 span 之间有烦人的缝隙？该怎么破

有一个比较诡异的问题想请教一下各位。

如图，我想做一个搜索框，后面会紧挨一个搜索按钮的效果。
但是发现这个搜索框和按钮之间会有缝隙，请问这个是什么原因造成的，该怎么破？

HTML:

<input id="jbzb_searchbox" type="text" placeholder="输入床号或姓名" />
<span id="search" class="btn_search" onmousedown="this.className+=' active'"  onmouseup="this.className='btn_search';">搜索</span>

CSS:

#jbzb_searchbox{
    margin:0;padding:1px 0 1px 4px;margin-left:30px;border-radius:0; -webkit-border-radius:0;-moz-border-radius:0;border:1px solid #CAC7CD;color:#585655;
}
.btn_search{
    display:inline-block;width:76px;border:1px solid #CAC7CD;border-left:none;text-align:center;cursor:pointer;height:22px;line-height:22px;color:#565855;
    background:url(../images/sbtn_b.png) -1px -1px no-repeat;
}