![](https://i-blog.csdnimg.cn/blog_migrate/d8d6595f19ef272c809f920f83c92680.png)
缝隙问题
可以看到input和button之间有一个间距
缝隙原因
标签之间的换行,产生的空白字符导致的
解决方法
不换行,把input和button放在一起
<input type="text"><button>点击</button>
font-size设置为0
父元素的字体设置为0
body{
font-size:0;
}
浮动
input{
float:left;}
button{
float:left;
}
定位和外边距
button{
margin-left: -2px;
}
高度问题
input会比button矮一点,因为在计算样式中查看
button里有box-size:border-box,
input没有定义样式box-size
谷歌默认content-box
所以input就会比button矮
box-size属性值
content-box 是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
解决方法:
input,button{
width: 100px;
height: 40px;
box-sizing: border-box;
vertical-align: middle;
}