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

问题描述

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

<p><input type='text' /><input type='submit' value='搜索' /> </p>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结构，发现间距确实变小了一点，但是，为何仍旧没有消失。

<p><input type='text' /><input type='submit' value='搜索' /> </p>

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？？

问题解答

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

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