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的時候，按照你的實現，應該就可以覆蓋默認的邊框實現方式，所以就沒有間隙了。