當我們將乙個元素的display設定為inline-block時，設定好各元素的寬高及顏色後，這個邊距就會詭異的出現了，即使你使用（margin:0;padding:0;）也是無法消除的。
charset="utf-8">
title>
type="text/css">
* div
style>
head>
div>
div>
div>
body>
html>
其實，很簡單，作為程式設計師，都會有乙個習慣，就是寫一行**換一行，這是為了讓我們的**可讀性更高。其實，正是因為這個換行，導致了這個間隔的出現。寫到這，相信很多童鞋都會有乙個解決方法了，那就是不換行就行了唄，但是呢，不換行又會導致我們的**可讀性降低。
所以，我統計了幾種解決方法：
第一種方法：就是大多數人都會想到的將要轉換為inline-block的元素寫在一起，不換行就行了，雖然這會使**可讀性降低，但這也不失為一種解決方法。
將以上**修改為：
charset="utf-8">
title>
type="text/css">
* div
style>
head>
div>
div>
div>
body>
html>
charset="utf-8">
title>
type="text/css">
* div
style>
head>
div>
div>
div>
body>
html>
charset="utf-8">
title>
type="text/css">
* div
style>
head>
div>
div>
div>
body>
html>
charset="utf-8">
title>
type="text/css">
* div
style>
head>
div >
div >
div>
body>
html>
那，inline-block的邊距問題就講到這，其實，網上也還有更多其它的方法，個人覺得還是這幾種方法最好，因為它們僅僅是改變html，相容問題也不用考慮。
如果還有其它更好的方法，歡迎分享。
關於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是一種很方便的方法，但是使用時會有一點小瑕疵。當子元素標籤與標籤之間存在空格 盒子一 盒子二則兩個盒子之間會產生間隙，如下 方法一 既然間隙是由於標籤之間的空格，那最簡單的方法就是刪除空格了，但在實際 編寫中，為了 的可讀性，我們更喜歡保留空格...