問(wèn)題描述

使用環(huán)境：debian8 + firefox-45.8 請(qǐng)看：

<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; }顯示效果

這里有兩個(gè)問(wèn)題：1。submit中的文字無(wú)法上下居中設(shè)置了vertical-align:middle;無(wú)法讓文字 “搜索”上下居中 “搜索”兩個(gè)字偏靠下

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

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

css不變，顯示效果如下：

為何還有間距？已經(jīng)設(shè)置了padding:0px;margin:0px; ？

對(duì)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;}間隙還在。

再對(duì)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; }

間隙消失

請(qǐng)：1。如何將文字上下居中

2。如何詳細(xì)解釋問(wèn)題2？？

問(wèn)題解答

文字沒(méi)有居中原因：因?yàn)閎ox-sizing設(shè)置為border-box，所以height = 邊框 + 內(nèi)邊距 + 內(nèi)容區(qū)的高度，因?yàn)樵O(shè)置height為30px，邊框的默認(rèn)寬度是middle，不同的瀏覽器具體用的像素值不一致，看下圖，firefox的middle用的是3px，所以內(nèi)容區(qū)就剩下24px了；因?yàn)槟阍O(shè)置行高為30px，所以如果你不設(shè)置height的話，自動(dòng)計(jì)算的高度應(yīng)該是30px + 3px + 3px = 36px，當(dāng)你設(shè)置的高度小于36px的時(shí)候，下面超過(guò)的部分隱藏了，所以感覺(jué)像是沒(méi)有居中；你可以在瀏覽器中改變height的值查看效果；把.search-btn的line-height屬性去掉文字就居中了。

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