CSS 邏輯屬性 (Logical Properties)

CSS 邏輯屬性是一組新的屬性，它們根據文件的 書寫方向（Writing Mode） 而非物理上的方向（上、下、左、右）來定義佈局。這是為了應對全球化網頁設計，讓樣式能自動適應不同國家的閱讀習慣（如從左到右 LTR 或從右到左 RTL）。

物理屬性 vs 邏輯屬性

傳統的「物理屬性」是固定的：

• width / height
• margin-top / margin-right / margin-bottom / margin-left

現代的「邏輯屬性」則是相對的：

• inline-size (對應寬度) / block-size (對應高度)
• margin-block-start (對應上外距) / margin-inline-end (對應右外距)

Inline 與 Block 的概念

理解邏輯屬性的關鍵在於這兩個軸：

1. Inline 軸：文字流動的方向（在中文/英文中是水平方向，從左到右）。
2. Block 軸：段落堆疊的方向（在常見閱讀習慣中是垂直方向，從上到下）。

常用屬性對照表

如果你使用的是繁體中文（從左到右閱讀）：

為什麼要用邏輯屬性？

1. 更好的可維護性：如果你需要開發一個同時支援英文與阿拉伯文（RTL）的網站，使用 margin-inline-start 就可以自動切換邊距方向，不需要另外寫 .rtl { margin-right: 20px; margin-left: 0; }。
2. 語意更清晰：當處理垂直書寫的文字（如古代中文或日文）時，margin-block-start 依然會正確地代表段落的上方（即使物理上它現在變成了右側）。

縮寫語法 (Shorthands)

邏輯屬性也提供簡潔的縮寫方式，這在現代開發中極受歡迎：

/* 設定左右外距為 20px (水平方向) */
.box {
  margin-inline: 20px;
}

/* 設定上下內距為 10px (垂直方向) */
.box {
  padding-block: 10px;
}

/* 設定垂直方向的邊框 */
.box {
  border-block: 2px solid blue;
}

實務範例：導覽列按鈕

.nav-item {
  /* 使用邏輯屬性設定左右間距，確保在不同語言下都有一致的間隔 */
  padding-inline: 1.5rem;
  padding-block: 0.5rem;

  /* 設定行首的裝飾線 */
  border-inline-start: 4px solid blue;
}

瀏覽器支援度

CSS 邏輯屬性在現代瀏覽器（Chrome 87+, Firefox 66+, Safari 14.1+）中都具備非常優秀的支援度。對於大多數現代網頁開發專案，建議優先採用邏輯屬性來取代物理方向屬性。