CSS Padding – w3schools

CSS Padding 是 CSS 中一種非常常見的盒子模型屬性，它會在某個 HTML 元素周圍創建空白的區域。在本篇文章中，我們將會從多個方面對 CSS Padding 進行講解，包括 Padding 的基礎用法、不同類型的 Padding、多個 Padding 的合併、Padding 和內容寬度的關係、Padding 和邊框的關係等。

一、基礎用法

CSS Padding 最基礎的用法就是設置一個 HTML 元素的內部空白區域的大小，可以使用 padding 屬性來實現。比如，如果我們想讓一個帶有背景色的元素展示出一些內邊距，可以這樣寫：

div {
  background-color: #f1f1f1;
  padding: 20px;
}

上面的代碼會在 <div> 元素周圍創建 20 像素的內部空白區域。如果我們想要左右上下都設置不同的 Padding，可以這樣寫：

div {
  background-color: #f1f1f1;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

上述代碼會在 <div> 元素周圍分別設置上下左右不同的 Padding。當然，如果四個方向上需要設置的 Padding 大小是一樣的，我們可以使用 padding: [size]; 的方式進行簡寫。

二、不同類型的 Padding

CSS Padding 有三種不同類型：內部、外部和繼承性。不同類型的 Padding 會在 HTML 元素的不同位置產生不同的效果。

1. 內部 Padding

內部 Padding 是指元素內部的空白區域。一般來說，設置內部 Padding 可以讓元素的文本內容與外部的邊框保持一定的距離，同時也可以提高用戶的閱讀體驗。需要注意的是，內部 Padding 不會影響元素的布局大小，僅會影響元素內部的布局。

2. 外部 Padding

外部 Padding 是指元素周圍的空白區域。一般來說，設置外部 Padding 可以讓元素與相鄰元素保持一定的距離，增加頁面的空白度，提高用戶的閱讀體驗。

3. 繼承性 Padding

繼承性 Padding 是指在某些情況下，元素的 Padding 大小會從父元素繼承。這種情況多出現在嵌套頁面中，比如在一個 <div> 中嵌套了一個 <a> 標籤，如果在 <div> 中設置了 Padding，那麼 <a> 標籤也會繼承父元素的 Padding 大小。

三、多個 Padding 的合併

當一個 HTML 元素同時設置了多個 Padding 屬性時，瀏覽器會將它們合併為一個值，從而實現不同方向 Padding 值的簡寫。這裡需要注意的是，不同瀏覽器對於 Padding 值的合併處理是不同的：Chrome 會將 padding-top 和 padding-bottom 處理為一個值，將 padding-right 和 padding-left 處理為一個值；而 Firefox 則是將所有 Padding 值按照 top-right-bottom-left 的方式進行處理。

四、Padding 和內容寬度的關係

CSS Padding 和內容寬度之間有一定的關係，這個關係涉及到 CSS 的盒子模型。當我們為一個元素設置了 Padding 大小後，元素的實際可用空間就會變小，從而導致元素內部的內容排列發生變化。比如，下面這個例子就展示了不同 Padding 值對元素內容寬度的影響：

div {
  background-color: #f1f1f1;
  padding: 20px;
}
p {
  background-color: #ffffff;
  width: 500px;
}

上述代碼中，我們給 <div> 元素設置了 20 像素的 Padding，而在 <p> 元素中設置了寬度為 500 像素。這時候我們會發現，在 <div> 元素中展示的 <p> 元素的實際寬度是 460 像素，因為元素的寬度被減去了兩側的 Padding 大小。

五、Padding 和邊框的關係

CSS Padding 和邊框之間也存在着一定的關係。當我們為一個元素添加了邊框時， Padding 會使可用空間減小，從而影響元素周圍邊框的寬度。比如，下面這個例子就展示了不同 Padding 值對元素邊框寬度的影響：

div {
  background-color: #f1f1f1;
  border: 10px solid #000000;
  padding: 20px;
}

上述代碼中，我們在 <div> 元素周圍設置了 10 像素的黑色邊框，並為元素添加了 20 像素的 Padding。這時候我們會發現，在邊框內部的空白區域實際上只有 10 像素，因為邊框的寬度被吸收到了 Padding 中。