如何在 CSS 中使用填充 (padding)

padding 是 CSS 中常用的屬性，用於在元素的內側添加空間。

記住：

  • margin 會在元素邊框外添加空間
  • padding 會在元素邊框內添加空間

特定 padding 屬性 (Specific padding properties)

padding 有 4 個相關屬性，可以一次性修改單個邊緣的填充效果：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

使用這些屬性非常簡單，不會混淆。例如：

padding-left: 30px;
padding-right: 3em;

使用 padding 簡寫 (Using the padding shorthand)

padding 是一個簡寫形式，用於同時指定多個填充值，根據輸入的值的數量不同，其行為也不同。

單一值 (1 value)

使用單一值會將其應用於所有填充：上，右，下，左。

padding: 20px;

2 個值 (2 values)

使用 2 個值將第一個值應用於上和下，第二個值應用於左和右。

padding: 20px 10px;

3 個值 (3 values)

使用 3 個值將第一個值應用於上，第二個值應用於左和右，第三個值應用於下。

padding: 20px 10px 30px;

4 個值 (4 values)

使用 4 個值將第一個值應用於上，第二個值應用於右，第三個值應用於下，第四個值應用於左。

padding: 20px 10px 5px 0px;

因此，順序為：上-右-下-左。

接受的值 (Values accepted)

padding 接受以任何種類的長度單位表示的值，最常見的單位包括像素(px)、字元(em)、根元素字元(rem)，但還有其他很多單位可供使用。