CSS border-spacing 屬性 - CSS 學習筆記

CSS border-spacing 屬性的功能是用來設計網頁表格欄位間或欄位與邊框間的距離，有點類似傳統 HTML 表格的 cellspacing 屬性，只不過 CSS border-spacing 屬性可以設計出更細膩的視覺效果，因為 border-spacing 屬性能夠做出 cellspacing 屬性無法達到的水平方向與垂直方向分開設計，所以變化更多也更細膩，所以 border-spacing 屬性也經常被視為是 cellspacing 屬性的取代語法。

CSS border-spacing 屬性基礎語法

border-spacing: 欄位水平間的距離欄位垂直間的距離;

CSS 的 border-spacing 屬性有兩個參數可以設定，第一個參數設定的是水平方向的欄位間距離，第二個參數設定的則是垂直間的欄位間距離，可以使用「數字 + 單位」的寫法，待會兒在範例中就會看到。另外，雖然大多數新的瀏覽器都支援 CSS border-spacing 屬性，不過老舊的 IE 瀏覽器就不支援，所以請考慮你的網站使用者有沒有人會使用 IE 瀏覽器，特別是會用老舊版本的 IE，如果是這樣的話，那還是使用傳統的 HTML cellspacing 屬性吧！

CSS border-spacing 屬性應用範例

原始碼：在新視窗開啟程式碼文字檔

範例的顯示效果

未使用 border-spacing 的表格欄位	未使用 border-spacing 的表格欄位
未使用 border-spacing 的表格欄位	未使用 border-spacing 的表格欄位

使用 border-spacing 的表格欄位	使用 border-spacing 的表格欄位
使用 border-spacing 的表格欄位	使用 border-spacing 的表格欄位

我們在範例中準備了兩個不同的 HTML 表格，第一個表格僅用了 border="1" 的效果，這是讓表格欄位粗細用 1 表示，相當傳統的設定方式，第二個表格套用了今天的主角 border-spacing 屬性，而且將水平方向的欄位間距離（包含與表格邊框間的距離）調整為 10px，垂直方向的的欄位間距離調整為 20px，可以從範例的顯示效果中看到相當顯著的差異，這就是 CSS border-spacing 屬性的功能。

延伸閱讀