css - input间的间距和文字上下居中

问题描述

问 题

使用环境：debian8 + firefox-45.8
请看：

    <div>
        <input class="left" type="text" />
        <input class="search_btn" type="submit" value="搜索" />
    </div>
    
    css
    
* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px; }
.search_btn { width:70px; height:30px; line-height:30px; }

显示效果

这里有两个问题：
1。submit中的文字无法上下居中
设置了vertical-align:middle;无法让文字 搜索上下居中
搜索两个字偏靠下

2。两个input的间距问题
有一种解释，空格也占据空间。
下面修改一个html结构，发现间距确实变小了一点，但是，为何仍旧没有消失。

    <div>
        <input class="left" type="text" /><input class="search_btn" type="submit" value="搜索" />
    </div>

css不变，显示效果如下：

为何还有间距？已经设置了padding:0px;margin:0px; ？

对input.left增加border ,将css修改为：

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px;border:1px solid red; }
.search_btn { width:70px; height:30px; line-height:30px;}

间隙还在。

再对input.search_btn增加border

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }
.left {  width:420px;height:30px;border:1px solid red; }
.search_btn { width:70px; height:30px; line-height:30px;border:1px solid red; }   

间隙消失

请：1。如何将文字上下居中

2。如何详细解释问题2？？

解决方案

1. 文字没有居中原因：因为box-sizing设置为border-box，所以height = 边框 + 内边距 + 内容区的高度，因为设置height为30px，边框的默认宽度是middle，不同的浏览器具体用的像素值不一致，看下图，firefox的middle用的是3px，所以内容区就剩下24px了；因为你设置行高为30px，所以如果你不设置height的话，自动计算的高度应该是30px + 3px + 3px = 36px，当你设置的高度小于36px的时候，下面超过的部分隐藏了，所以感觉像是没有居中；你可以在浏览器中改变height的值查看效果；把.search-btn的line-height属性去掉文字就居中了。

2. 对于行内元素来说，空白符会转化为一个空格，因为在第一个div之后存在一个换行，换行符是空白符，所以转化成了一个空格。改变html格式以后，还有间距，那可能是Firefox自己实现的button样式，虽然有3px的边框，但是看效果明显边框没有那么粗，估计firefox实现的时候在周围会有2px的透明边框，然后是1px的实线框。当明确设置border的时候，按照你的实现，应该就可以覆盖默认的边框实现方式，所以就没有间隙了。

这篇关于css - input间的间距和文字上下居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！