如何解决input，inline-block元素间的空隙

在我们制作类似登陆框的东西的时候，需要用到label和 input text，但是实际上他们之间会存在空隙

<form action="/login" method="post">
		<div>
			<label for="username" class="label_text">用户名：</label>
			<input type="text" name="username" id="username" class="input_text">
		</div>
		<div>
			<label for="pwd" class="label_text">密码：</label>
			<input type="text" name="pwd" id="pwd" class="input_text">
		</div>
		<input type="submit" name="login" value="登陆" id="Blogin">
	</form>

我们这里

对登陆按钮进行了left:60px;

label的width也是60px;

可是没有对齐，原因就是用户名和后面的框存在空隙

这个时候我们设置

form{
	position: relative;
	/*如果不设置，那么应该inline-block的因素，会导致input跟text间有空隙*/
	font-size: 0;
}

这样就可以了

这个是对所有的inline-block元素都是这样的

参考

https://segmentfault.com/q/1010000007871257

第二更全

http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/