• • 發現問題
  • 解決問題
    • 水平縫隙
    • 垂直縫隙

發現問題

在開發中經常會遇到搜尋框組，即一個input輸入框和一個button點選搜尋框，由於瀏覽器的解析原因，我想知道但是我沒有找到答案，會出現即使是同樣的高度，視覺上input組並沒有在一條水平線上，以及會出現水平距離上的縫隙。

解決問題

水平縫隙

水平縫隙問題其實是因為標籤之間的換行，產生了空白符，這些空白符某種意義上也算是字元，所以理所當然的佔據了一定的空隙，解決的方式有很多，我常用：既然是字元，那麼把font設定為0，就解決了。

還有就是書寫的時候不換行，當然這樣看上去會很彆扭，我是不用的。

垂直縫隙

• bootstrap裡有一個輸入框組建，我研究了他的程式碼。按照我的理解，按照標準行內元素span最好不要包裹塊級元素，這樣做的目的，我暫時沒有理解，並且去掉span，依舊可以得到正確的樣式。
  
  +設定普通樣式，父元素設定高為30px; input框高為30px；按鈕高為30px；
  

  由於button在高度計算上始終使用了Quirks模式。在Quirks模式下，邊框的計算是在元素的寬度內的，而不像標準模式一樣計算在外部（button的高度包含邊框的高度，而文字框text則不包含邊框高度）所以給input框設定box-sizing屬性，達到統一高度為30px；

• 可以看到input上方的縫隙，原因我暫時不知道，但是解決方式很簡單，float可以讓整個元素脫離文件流，儘可能的窄，也就是隻佔據自己的位置，只需要加上float：left就可以解決這個問題了。