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