CSS margin 外距

margin 用來設定元素「外部」的空間，也就是元素與其他元素之間的距離。

基本語法

/* 四邊相同 */
.box {
  margin: 20px;
}

/* 上下 | 左右 */
.box {
  margin: 20px 10px;
}

/* 上 | 左右 | 下 */
.box {
  margin: 20px 10px 30px;
}

/* 上 | 右 | 下 | 左（順時針） */
.box {
  margin: 20px 10px 30px 40px;
}

個別方向

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 40px;
}

auto 值

margin: auto 常用於水平置中區塊元素：

.container {
  width: 800px;
  margin: 0 auto;    /* 水平置中 */
}

/* 只有左右 auto */
.center {
  margin-left: auto;
  margin-right: auto;
}
margin: auto 只對有設定寬度的區塊元素有效。對於垂直方向，auto 的值是 0。

負值 margin

margin 可以是負值，讓元素往該方向移動並重疊：

.overlap {
  margin-top: -20px;    /* 元素往上移動 20px */
}

.pull-left {
  margin-left: -10px;   /* 元素往左移動 10px */
}

Margin Collapse（外距重疊）

當兩個垂直相鄰元素的 margin 相遇時，它們會合併成一個 margin，取較大的值。

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

/* box1 和 box2 之間的距離是 30px，不是 50px */

發生 Margin Collapse 的情況

  1. 相鄰兄弟元素：上方元素的 margin-bottom 和下方元素的 margin-top
  2. 父子元素：父元素的 margin-top 和第一個子元素的 margin-top
  3. 空元素：元素自身的 margin-top 和 margin-bottom

避免 Margin Collapse

  • 父元素加上 padding 或 border
  • 父元素使用 overflow: hidden 或 overflow: auto
  • 父元素使用 display: flex 或 display: grid
  • 使用 padding 代替 margin
/* 加上 padding 避免父子 margin collapse */
.parent {
  padding-top: 1px;
}

/* 使用 overflow 避免 margin collapse */
.parent {
  overflow: hidden;
}

與 padding 的差別

特性marginpadding
位置邊框外部邊框內部
背景透明有背景色
可用 auto可以不可以
可以負值可以不可以
Collapse會不會

實用範例

區塊置中

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

清除預設 margin

/* 重置常見元素的預設 margin */
body, h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
}

段落間距

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

卡片間距

.card {
  margin-bottom: 24px;
}

/* 或使用 gap（Flexbox/Grid）更好 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

導航項目間距

nav a {
  margin-right: 20px;
}

nav a:last-child {
  margin-right: 0;
}

邏輯屬性

CSS 提供邏輯屬性來支援不同書寫方向的語言：

.box {
  margin-block-start: 20px;   /* 相當於 margin-top（在 LTR 中） */
  margin-block-end: 20px;     /* 相當於 margin-bottom */
  margin-inline-start: 10px;  /* 相當於 margin-left */
  margin-inline-end: 10px;    /* 相當於 margin-right */
}

/* 簡寫 */
.box {
  margin-block: 20px;         /* 上下 */
  margin-inline: 10px;        /* 左右 */
}