display: table-cell 無法使用 margin/ padding 的解法

只要是使用 HTML+DIV 排版的人,應該都很清楚table 是用來繪製表格,而非用來排版的這件事情。然而因為 DIV 真的太好用了,現在很多人幾乎都不知道table, tr, td… 該怎麼互相搭配與運用。雖然不清楚是哪些因素影響,但是 W3C 卻在 CSS 的display屬性裡面支援table值,讓我們可以使用 DIV 就做出跟 HTML 的 table 標籤一樣的效果。(該說是 CSS 跟 HTML 互打臉嗎?)

關於display: table的介紹與運用,知名部落客香腸已經有一篇很深入淺出的文章,我就不多贅述了。完全沒用過display: table的朋友、或想了解該怎麼使用的朋友,可以參考香腸的:用CSS+DIV畫表格(table)進行網頁排版

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


話不多說,先上個範例!我使用圖片+圖說當作範例,例子包含:

  • 正常狀況下,圖片緊密排列
  • 使用margin調整的結果
  • 將寬度寫死的結果
  • 使用border-spacing調整的結果

See the Pen Ctigb by MUKi (@mukiwu) on CodePen.

如果看完例子還是似懂非懂,或想更了解原理的朋友,可以繼續往下閱讀喲。


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

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

display:table在預設情況下,只要我們給他一個寬度,裡面的元素就會自動依據總寬度分散對齊。
在這邊,因為每張圖寬為 120px,所以我先設定總寬是 480px,這樣他們就會緊密排列在一起,如下圖所示:


使用 margin 調整的結果

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

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

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

因此可以發現,margindisplay:table*一家子是沒有任何作用的。透過 MSDN Document 對 margin 的介紹可以了解

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外,適用所有元素(包含 table-caption, table, inline-table )。
margin – CSS | MSDN

因為不支援margin,所以沒有任何效果也是正常的喔。


將寬度寫死的結果

既然margin沒有任何作用,我們可能會利用display:table分散排列的特性,手動設定寬度讓圖片對齊。
例如:4x120px + 5x5px = 480 + 25 = 505px
將整體寬度設定為 505px 後,就會根據寬度分散對齊,變成下面的圖片效果:

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

  1. 第一張圖片的最左邊還是貼齊 div,沒有任何空隙
  2. 假使圖片超過四張,間隙就會消失了(因為圖片寬度寫死,所以沒彈性)

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


使用 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*的支援度囉!


最後再看一次線上範例,加深自己的印象吧!請記得,將寬度寫死,絕對不是一個好解法喲 🙂

See the Pen Ctigb by MUKi (@mukiwu) on CodePen.