# CSS 19. padding 設定方式

### 設定的習慣:

1. 單獨設定個別 padding:


- 以上圖為例，假設我作出以下設定，結果如下:

button.example {
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 4rem;
}


### padding 快速設定方式:

#### 1. 第1種做法: 上-右-下-左

- 其實不需要特別去記憶他們，順序就是:

上-右-下-左 >>> 這是一個**順時針**的概念。

// 上 右 下 左:

button.example {
  padding: 1rem 3rem 2rem 1rem;
}


#### 2. 第2種做法: 設定 上下，左右

// (上下) (左右)

button.example {
  padding: 3rem 5rem;
}


#### 3. 第3種做法: 單一數值設定完(上右下左)

// 適用在全距都相同的時候使用

button.example {
  padding: 3rem;
}

- 以上的設定結果，都可以透過網頁開發者工具的 box model 來觀察結果。

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - box model`