CSS padding 內距

padding 用來設定元素「內部」的空間，也就是內容和邊框之間的距離。

基本語法

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

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

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

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

個別方向

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

padding 與元素大小

預設情況下，padding 會增加元素的實際大小：

.box {
  width: 200px;
  padding: 20px;
  /* 實際寬度 = 200 + 20 + 20 = 240px */
}

使用 box-sizing: border-box 可以讓 padding 包含在 width 內：

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  /* 實際寬度 = 200px */
}

百分比值

padding 的百分比是相對於「父元素的寬度」計算，即使是上下方向也是如此：

.parent {
  width: 400px;
}

.child {
  padding: 10%;    /* 四邊都是 40px */
}

這個特性可以用來製作固定比例的容器：

/* 16:9 比例容器 */
.aspect-ratio-16-9 {
  width: 100%;
  padding-top: 56.25%;    /* 9/16 = 0.5625 */
  position: relative;
}

.aspect-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

實用範例

按鈕內距

.btn {
  padding: 10px 24px;
}

.btn-small {
  padding: 6px 16px;
}

.btn-large {
  padding: 14px 32px;
}

卡片內距

.card {
  padding: 24px;
}

.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

.card-body {
  padding: 24px;
}

容器內距

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

@media (min-width: 768px) {
  .container {
    padding: 0 40px;
  }
}

導航列內距

nav {
  padding: 16px 24px;
}

nav a {
  padding: 8px 16px;
}

輸入框內距

input {
  padding: 10px 16px;
}

textarea {
  padding: 12px 16px;
}

列表項目內距

li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

邏輯屬性

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

.box {
  padding-block-start: 20px;   /* 相當於 padding-top */
  padding-block-end: 20px;     /* 相當於 padding-bottom */
  padding-inline-start: 10px;  /* 相當於 padding-left */
  padding-inline-end: 10px;    /* 相當於 padding-right */
}

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

與 margin 的差別

何時用 padding vs margin

• padding：元素內部空間、增加點擊區域、背景需要延伸的地方
• margin：元素之間的距離、置中元素

/* 使用 padding 增加按鈕點擊區域 */
.btn {
  padding: 12px 24px;
}

/* 使用 margin 分隔按鈕 */
.btn + .btn {
  margin-left: 8px;
}