CSS 填充

填充區域是元素內容與其邊界之間的空間。

CSS 填充屬性

CSS 填充屬性允許你為將邊框與其內容分隔開的元素設定填充區域。填充受到框 background-color 的影響。

為單邊指定填充

你可以使用 CSS 單個填充屬性輕鬆地為元素的不同邊指定不同的填充，例如頂部、右側、底部或左側。

h1 {
    padding-bottom: 10px;
}
p {
    padding-top: 20px;
    padding-left: 50px;
}

填充速記屬性

padding 屬性是一個速記屬性，以避免對元件的每一側上分別設定填充即 padding-top、padding-right、padding-bottom 和 padding-left。

h1 {
    padding: 10px 20px;
}
p {
    padding: 10px 15px 20px 25px;
}

注意： 與 CSS margin 屬性不同，填充屬性的值不能為負數。與 margin 屬性一樣，padding 屬性的百分比值指的是生成的 box 包含塊的寬度。

padding 屬性可以採用一個、兩個、三個或四個以空格分隔的值。

• 如果設定了一個值，則將其應用於所有四個邊。
• 如果指定了兩個值，則第一個值應用於頂部和底部，第二個值應用於右側和左側。
• 如果指定了三個值，則第一個值應用於頂部，第二個值應用於左側和右側，最後一個值應用於底部。
• 如果指定了四個值，則它們將按指定順序分別應用於頂部、右側、底部和左側。