問題描述

使用環(huán)境：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中的文字無法上下居中設(shè)置了vertical-align:middle;無法讓文字 “搜索”上下居中 “搜索”兩個字偏靠下

2。兩個input的間距問題有一種解釋，空格也占據(jù)空間。下面修改一個html結(jié)構(gòu)，發(fā)現(xiàn)間距確實變小了一點，但是，為何仍舊沒有消失。

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

css不變，顯示效果如下：

為何還有間距？已經(jīng)設(shè)置了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設(shè)置為border-box，所以height = 邊框 + 內(nèi)邊距 + 內(nèi)容區(qū)的高度，因為設(shè)置height為30px，邊框的默認(rèn)寬度是middle，不同的瀏覽器具體用的像素值不一致，看下圖，firefox的middle用的是3px，所以內(nèi)容區(qū)就剩下24px了；因為你設(shè)置行高為30px，所以如果你不設(shè)置height的話，自動計算的高度應(yīng)該是30px + 3px + 3px = 36px，當(dāng)你設(shè)置的高度小于36px的時候，下面超過的部分隱藏了，所以感覺像是沒有居中；你可以在瀏覽器中改變height的值查看效果；把.search-btn的line-height屬性去掉文字就居中了。

對于行內(nèi)元素來說，空白符會轉(zhuǎn)化為一個空格，因為在第一個p之后存在一個換行，換行符是空白符，所以轉(zhuǎn)化成了一個空格。改變html格式以后，還有間距，那可能是Firefox自己實現(xiàn)的button樣式，雖然有3px的邊框，但是看效果明顯邊框沒有那么粗，估計firefox實現(xiàn)的時候在周圍會有2px的透明邊框，然后是1px的實線框。當(dāng)明確設(shè)置border的時候，按照你的實現(xiàn)，應(yīng)該就可以覆蓋默認(rèn)的邊框?qū)崿F(xiàn)方式，所以就沒有間隙了。