父級元素： letter-spacing: -0.5em;font-size: 0; 子級元素： letter-spacing: normal; display: inline-block; vertical-align: top; 即可解決。 問題剖析： 以input元素為例子：因為input元素 ...
父級元素：
letter-spacing: -0.5em;font-size: 0;
子級元素：
letter-spacing: normal; display: inline-block; vertical-align: top;
即可解決。
問題剖析：
以input元素為例子：因為input元素是行內塊元素，所以它所在的行會形成一個行框。然後行框的高度是和line-height屬性相關的，line-height的說明如下：
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
line-height定義的是行的最小高度，當行內包含行內元素的時候，每個行內元素會生成一個行內框，然後行內元素根據vertical-align屬性對齊元素，然後取所有這些框的最高上邊界和最低下邊界，最高上邊界和最低下邊界之間的高度組成了實際的行高。
那麼規範又是如何保證line-height定義的是行的最小高度的呢？
其實，參與行框形成的元素，除了這些實際存在的行內元素，還存在一個strut元素，這是一個假想的具有塊元素的字型大小和行高的零寬元素，這個元素會參與最後實際的行高。
現在，我們來看這個問題：
你這個頁面運行之後，會在html元素上添加一個font-size屬性，沒有具體看這個大小和什麼相關，我運行代碼以後的結果是font-size: 50px;，下麵以font-size: 50px;來進行說明。
因為font-size屬性是可以繼承的，所以你的div元素的font-size也是50px；因為line-height的預設值是normal，規範推薦的normal值是字體大小的1.0到1.2之間，和瀏覽器實現有關，我們這裡假設用的1.0；
第一個元素是p元素，是塊級元素，不會生成行框，和line-height沒有關係；
第二個元素是input元素，input元素是行內塊元素，行內塊元素生成的行內框是元素上外邊界到下外邊界（margin的上邊界到下邊界），然後strut這個假想元素生成了一個高為font-size * line-height = 50px * 1 = 50px的行內框，這兩個行內框按照基線對齊的方式進行排列，然後取這兩個行內框的最高上邊界和最低下邊界就是最後的行框。因為input元素生成的行內框遠遠沒有50px，所以最後取得應該是strut的上邊界和下邊界，所以這個行框是50px，所以導致中間有"所謂"大段的空白。
綜上，你可以設置div的font-size: 0px;這樣假想的strut元素形成的行內框就不會高於input元素生成的行內框了。
或者設置input元素display: block;，這樣input元素就是塊級元素了，塊級元素是不涉及行框的。
