之前發過一篇，用div+css替代table的文章，因為div+css實在好用。

已實際用過display: table的朋友，當你們在使用的時候，也許會碰到「間距調整」的問題，例如要在每一個table-cell裡頭設定margin等間距調整，卻發現修改無效。假設你碰過這種狀況，不妨參考一下我推薦的解法。

話不多說，先上個范例！我使用圖片+圖說當作范例，例子包含：

正常狀況下，圖片緊密排列

使用margin調整的結果

將寬度寫死的結果

使用border-spacing調整的結果

正常狀況下，圖片緊密排列

一般我們要做水平排列的圖層，多半會使用float或display等屬性設定。如果今天你有製表的需求，或是其它因素考量，也可以嘗試使用display:table達成。

display:table在預設情況下，只要我們給他一個寬度，裡面的元素就會自動依據總寬度分散對齊。

在這邊，因為每張圖寬為 120px，所以我先設定總寬是 480px，這樣他們就會緊密排列在一起，如下圖所示：

使用 margin 調整的結果

如果我們希望每張圖都有一點空隙，不要緊密排列的話。正常思維下，都會使用margin達成。因此我在范例二加入了這段語法：

.case-2 figure {
  margin: 10px;
}

顯示結果為(你可以嘗試將 10px 修改成 100px，會發現沒有任何作用)：

因此可以發現，margin對display:table*一家子是沒有任何作用的。

將寬度寫死的結果

既然margin沒有任何作用，我們可能會利用display:table分散排列的特性，手動設定寬度讓圖片對齊。

例如：4x120px + 5x5px = 480 + 25 = 505px

將整體寬度設定為 505px 后，就會根據寬度分散對齊，變成下面的圖片效果：

乍看之下達到了我們想要的效果，每張圖片中間都有間隙。但仔細研究后你會發現兩個問題：

第一張圖片的最左邊還是貼齊 div，沒有任何空隙

假使圖片超過四張，間隙就會消失了（因為圖片寬度寫死，所以沒彈性）

由此可知，將寬度寫死，絕對不是一個好解法。曾經嘗試過用這種解法的朋友，建議把它拋諸腦后吧！

使用 border-spacing 調整的結果

利用border-spacing，是目前普遍認為較適當的解法。

我們只要在display:table-cell的父層，也就是display:table這層加上第 3 跟 4 行的兩行語法就可以蘿：

.image-list {
  display: table;
  border-collapse:separate;
  border-spacing: 5px;
}

顯示結果如下

跟剛剛使用寬度寫死的范例圖片相比，可以方便每一張圖片的左右空隙都是一樣的，不管是第一張或是最后一張，都留有 5px 的空隙。

但因為我們必須將這個設定寫在父層，所以在image-list底下的所有display:table-cell都會套用此設定，如果有的 table 不想要有空隙設定，就必須單獨把 HTML 的結構拉出來，或是再用 CSS 權重覆蓋，算是比較麻煩的一點。

目前還無法只針對table-cell做調整，希望以后 W3C 可以增加更多對display:table*的支援度蘿！

最后再看一次線上范例，加深自己的印象吧！請記得，將寬度寫死，絕對不是一個好解法喲