(Muki) 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
調整的結果
如果看完例子還是似懂非懂,或想更了解原理的朋友,可以繼續往下閱讀喲。
正常狀況下,圖片緊密排列
一般我們要做水平排列的圖層,多半會使用float
或display
等屬性設定。如果今天你有製表的需求,或是其它因素考量,也可以嘗試使用display:table
達成。
display:table
在預設情況下,只要我們給他一個寬度,裡面的元素就會自動依據總寬度分散對齊。
在這邊,因為每張圖寬為 120px,所以我先設定總寬是 480px,這樣他們就會緊密排列在一起,如下圖所示:
使用 margin 調整的結果
如果我們希望每張圖都有一點空隙,不要緊密排列的話。正常思維下,都會使用margin
達成。因此我在範例二加入了這段語法:
1
2
3
|
.case-2 figure {
margin:10px;
}
|
▼ 顯示結果為(你可以嘗試將 10px 修改成 100px,會發現沒有任何作用):
因此可以發現,margin
對display: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 後,就會根據寬度分散對齊,變成下面的圖片效果:
乍看之下達到了我們想要的效果,每張圖片中間都有間隙。但仔細研究後你會發現兩個問題:
- 第一張圖片的最左邊還是貼齊 div,沒有任何空隙
- 假使圖片超過四張,間隙就會消失了(因為圖片寬度寫死,所以沒彈性)
由此可知,將寬度寫死,絕對不是一個好解法。曾經嘗試過用這種解法的朋友,建議把它拋諸腦後吧!
使用 border-spacing 調整的結果
利用border-spacing
,是目前普遍認為較適當的解法。
我們只要在display:table-cell
的父層,也就是display:table
這層加上第 3 跟 4 行的兩行語法就可以囉:
1
2
3
4
5
|
.image-list {
display:table;
border-collapse:separate;
border-spacing:5px;
}
|
▼ 顯示結果如下
跟剛剛使用寬度寫死的範例圖片相比,可以方便每一張圖片的左右空隙都是一樣的,不管是第一張或是最後一張,都留有 5px 的空隙。
但因為我們必須將這個設定寫在父層,所以在image-list
底下的所有display:table-cell
都會套用此設定,如果有的 table 不想要有空隙設定,就必須單獨把 HTML 的結構拉出來,或是再用 CSS 權重覆蓋,算是比較麻煩的一點。
目前還無法只針對table-cell
做調整,希望以後 W3C 可以增加更多對display:table*
的支援度囉!
最後再看一次線上範例,加深自己的印象吧!請記得,將寬度寫死,絕對不是一個好解法喲 :)
原文:http://blog.mukispace.com/fix-display-table-cell-not-affected-by-margin/