在我们制作类似登陆框的东西的时候,需要用到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/