input 與 button 的問題 （空隙/不等高/對不齊）及 解決辦法

Jodedong發表於2020-11-09
1. input 與 button 為什麼有空隙?

- 要明白為什麼,需要了解一下幾點基礎知識(耐心看完,你會發現竟如此簡單)

    1. input 與 button 都屬於行級塊元素,都具有文字特性,
    2. html中有一個被稱之為:空白文字分隔符的東東(即:html中,無論你在兩個行級或行塊級元素之間寫多少個回車和空格都會被摺疊一個空格,我在這裡稱它為空白文字分割符)
    3. 關鍵也就來了:我們在寫的html程式碼中,你會發現我們的input 與 buton元素之間是不是有個回車,而這個回車就是我上面所說的空白文字分割符,他是有大小的,所以會出現 input 與 buttom之間有空隙的現象

- 解決辦法:
    - 知道了為什麼,那麼解決辦法就相當的容易了,直接刪除我們html程式碼中input 與 button 之間的回車即可.
- 解決辦法2：
　　讓 input 與 button 都浮動
 
2. input 與 buttom 為什麼 設定的 等高 卻 不等高? 等高卻對不齊?

- 我希望你可認真按照下面的方法跟著探索(你會發現,竟~哈哈哈)

    1. 建立一個test.html
    
    2. 敲上input 和 button兩個元素,定義寬高,因為我們要測試為什麼高度一致卻對不齊,所以,我們給它們等高,等邊框,寬度隨意,
    
    [注意:input與button之間有縫隙問題,要對齊,先去掉縫隙,如何解決:具體參考上個問題]
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9          * {
10             padding: 0;
11             margin: 0;
12         }
13         input {
14             width: 180px;
15             height: 40px;
16             border: 1px solid #008c8c;
17         }
18         
19         button {
20             width: 50px;
21             height: 40px;
22             background: inherit;
23             border: 1px solid black;
24             /* box-sizing: content-box; */
25         }
26     </style>
27 </head>
28 
29 <body>
30     <input type="text"><button>按鈕</button>
31 </body>
32 
33 </html>

以上程式碼在瀏覽器中檢視,你會發現明明設定的是等高,但input卻比button高度要高一些(為什麼呢,繼續往下看)

3. 右鍵檢查(或F12使用開發者工具),選中input元素,檢視他的盒子模型,你會發現,咦,這玩意除了我們設定的寬高,居然還有自帶的padding,這時候你會想,是不是padding的問題,(其實button也是有自帶的padding的),
為了排除padding的影響,我們在程式碼中插入*{
    padding:0;
    margin:0;
}
這時候你會發現,咦,好像還是對不齊,看來不是padding的問題(其實,我們在開發中,一般都會初始化所有元素的padding和margin),所以這一點很明顯不是影響input 和 button對不齊的原因

4. 此時,我們在選中button元素,檢視他的盒模型,咦,一會驚奇的發現,臥槽,怎麼它的寬度是48px,高度是38px了呢,我們明明設定的是 50px 和 40px啊,但是你在細心觀察你會發現,咦,邊框加上好像就是我們設定的50px和40px了,哇,這不就是box-sizing:border-box的表現嗎?(我們此時在Computed中檢視計算樣式 box-sizing 發現還真是 border-box)

到了這裡,我們的問題終於有點眉目了,不要放棄,堅持就是勝利,距離大神只差一步,我們每次探索問題的每一步

5. 這點需要知道:
Chrome瀏覽器box-sizing預設是content-box,即padding 和 border都是不算在我們設定的width 和 height中的,
而 box-sizing : border-box,即 padding 和 border 是算在width 和 height中的; 

6. 到了這裡相必大家也都知道為什麼 input 和 button 對不齊的,這也就是為什麼我們檢視button的盒模型時,它的width變為38px的原因了,

7. **此時,我們把button的width改為 42px(記得改高度,我就不在寫程式碼了)


8. 最後你會發現還是有一丟丟的對不齊,按理來講它應該對齊了呀,
哈哈哈,此時才發現,我們只是解決了第一個小問題,為什麼不等高,
其實,我們起初就以為他們是對不起,而忽略了等不等高的問題,不著急繼續

9. 給input設定 vertical-align:1px;你會發現,臥槽,完美對齊了,
,以上的都是自己摸索的過程,但也只完美的解決了第一個隱藏問題,為什麼不等高,但為什麼對不齊,其實我也不太清楚,只是湊巧用學過的屬性,用到了這裡,雖然解決了,但還是不清楚所以然,忘有大家有清楚的可以指導一下,謝謝大家(記得留言探討哦~)

 

相關文章