從頁面的發展歷程倆看我們是經過了 表格佈局->表格+css->div+css的浮動佈局->div+css的內聯塊佈局 inline-block佈局：一種更優的佈局技術inline-block佈局：一種全新的web頁面佈局解決方案，其既可以充分發揮div+css浮動佈局的優點，又可克服浮動盒子所帶來的缺點。

1. 盒子跟外界（其兄弟元素）表現為內聯（inline）模式，即可以跟其兄弟元素自然並排放置（類似img標籤），但盒子作為整體，又表現為塊模式，即該盒子本身不能“自動換行顯示”，可以設定寬高。

2. 實際上，從整體表現上來說，inline-block盒子的表現非常類似“img”元素，即多個img可以在一行中出現，但一個img本身是不會“中間折行”的（對比：span和a標籤碰到了行尾都會自動折行）。只不過img作為圖片顯示元素，其“內部”不能放其他內容了，而inline-block盒子卻是我們最常規的可任意放置其他內容的一個“容器”。要用inline-block佈局會存在一個4px左右的的

我們來看一個簡單的例子：

執行之後：

我們可以看到在這3個a標籤之前是存在間隙的，那麼如何來去除間隙呢？

下面總結了幾條去除inline元素和inline-block元素去除間距的方法：

1、可以在html中直接把元素寫在一行上或把閉合標籤和第二個開始標籤寫在一行或兩行間添加註釋或直接去掉閉合標籤但最後一個不能去掉。 

css程式碼不變，html程式碼修改如下：

<div class="subject">

<a href="#">html<a href="#">css<a href="#">js</a>

</div>

執行結果，間距消失

2、設定margin-right為負值，但要考慮上下文的字型和文字大小。 

html程式碼不變，css程式碼修改如下：

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

margin-right: -6px;

}

執行之後，a標籤之間沒有間隙。