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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
设置父级的font-size:0 ，可以解决！
似乎是和换行有关系的，当你把span和input放一行时就没有问题。
可以通过float 或 margin-left 来解决。margin-left 可能会有不同浏览器的兼容性，建议使用float吧。
原因就是浏览器会把连续的多个空格或换行渲染成一个空格。
解决办法参考 @netingcn 的回答，或者设置父级元素
font-size:0,子元素重新设置font-size两个都不是display:block，加上float:left，看看会不会如楼主所想的后者贴在前者的后面
float: left
这个给题主一个建议，你这个按钮一点都没有语义化，按钮就是按钮，为什么要用span，button也可以设置背景图片，而且css3有很多的新属性去美化这个按钮，不需要在用背景图了（精灵图）