建立 2025-02-25 更新 2026-09-11

`margin` 與 `padding`（外邊距與內邊距）

margin 推開別的元素；padding 撐開自己內部的空間。兩者都支援 1～4 個值的縮寫，方向順序是 上 → 右 → 下 → 左（順時針，從 12 點鐘開始）。

`margin`（外邊距 / Margin）

.card { margin: 1.5rem; }           /* 四邊 */
.card { margin: 1rem 2rem; }        /* 上下 | 左右 */
.card { margin: 1rem 2rem 1.5rem; } /* 上 | 左右 | 下 */
.card { margin: 8px 16px 24px 32px; } /* 上右下左 */

單邊寫法：margin-top、margin-right、margin-bottom、margin-left。

區塊水平置中

定寬（或 max-width）的區塊可用左右 auto：

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

margin-inline 是邏輯屬性，在直書或 RTL 時仍代表「行的兩端」，比寫死 margin-left/right 更穩。

Flex / Grid 裡的置中

子元素在彈性或網格容器裡，置中通常交給 justify-content / align-items / place-items，不必再靠 margin: auto（不過 margin-inline: auto 在 Flex 裡仍常用來把某一顆推到最右邊）。

負 margin

margin-top: -1rem 可以讓元素重疊或把視覺往回拉。好用但難除錯，優先考慮是否該改 padding 或用 transform: translateY()。

`padding`（內邊距 / Padding）

.btn {
  padding: 0.5em 1.1em;
}

padding 會讓背景與點擊區域變大
在 content-box 下會把總寬撐大；border-box 則吃進你設的 width

按鈕、輸入框務必留足夠 padding，不要只靠增大 height，否則文字垂直對不齊。

邏輯屬性（Logical Properties）

實體	邏輯（隨書寫方向變）
`margin-left` / `right`	`margin-inline-start` / `end`
`margin-top` / `bottom`	`margin-block-start` / `end`
`padding-*`	`padding-inline`、`padding-block`

.icon-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  padding-block: 0.5rem;
}

用 `gap` 取代兄弟間的 margin

Flex 與 Grid 的 gap 只出現在項目之間，不會在兩端多出空隙，也沒有垂直合併問題：

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem; /* 列距 行距 */
}

舊的「每個 item margin-right，最後一個再清掉」可以退休了。

怎麼選

需求	用誰
元件與元件分開	`margin` 或父層 `gap`
內容不要貼邊	`padding`
卡片裡標題與正文的節奏	子元素 margin 或 flex `gap`
滿版背景但文字要縮排	只設 padding，不要用 margin 把背景縮進去

總結

屬性	作用
`margin`	外部空隙，背景畫不到
`padding`	內部空隙，背景會蓋到
`gap`	Flex / Grid 項目間距，優先選它
`margin-inline: auto`	定寬區塊水平置中

邊線、圓角與陰影請看邊框與陰影。

margin 與 padding（外邊距與內邊距）

margin（外邊距 / Margin）