display:inline-block：眾前端們都知道，其作用是將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。
有如下**
css code複製內容到剪貼簿
這樣呈現的如下
2個元素之間有間隙，那麼問題來了
為什麼會出現間隙？
原因是inline-block允許空格，出現空隙的罪魁禍首就是包括換行在內的空白符。
如何消除間隙？
對父級元素設定font-size:0
即上述css**改為
css code複製內容到剪貼簿
nfoqgzj
block，inline和inlinke-block細節對比
display:block
1.block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
2.block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。
3.block元素可以設定margin和padding屬性。
display:inline
1.inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
2.inline元素設定width,height屬性無效。
3.inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
簡單來說就是將物件呈程式設計客棧現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給乙個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
本文標題: inline-block帶來的元素間距問題解決
本文位址:
關於inline block的使用
在手機端移動網頁開發中我不喜歡使用浮動布局，所以使用一些其他的，比如inline block 問題 在inline block使用過程中發現，長度有時候總是不受控制，比如70 30 100 而自動換行的問題。解決 發現兩個inline block之間如果有留白，則就會出現上面的問題，解決辦法一 標籤...
關於inline block的相容測試
首先說下inline block inline block的區別 inline 行內元素顯示前後無換行符 block 塊級元素 inline block 行內塊元素 重點說下inline block這個屬性。經過測試當display inline block的時候，本身為塊元素的html標籤 比如 ...
消除inline block產生的間隙
在水平對齊方法中display inline block是一種很方便的方法，但是使用時會有一點小瑕疵。當子元素標籤與標籤之間存在空格 盒子一 盒子二則兩個盒子之間會產生間隙，如下 方法一 既然間隙是由於標籤之間的空格，那最簡單的方法就是刪除空格了，但在實際 編寫中，為了 的可讀性，我們更喜歡保留空格...