內邊距 padding

網頁元素容器由內而外的第一層就是「內邊距」，可以使用 padding 控制樣式，這篇教學會介紹網頁元素的 padding，除了基本的單數值設定、多數值設定和長度單位，還會介紹可置換元素和不可置換元素使用 padding 時的差異。

請先閱讀：容器盒子模型 ( box Model )

快速導覽：

• padding 撰寫語法
• padding-* 單一內邊距
• padding 使用的長度單位
• 不可置換行內容器的 padding
• 可置換行內容器的 padding
• padding 的背景延伸特性

padding 撰寫語法

padding 是元素容器盒子模型裡的「內邊距」，也就是元素由內而外，緊連著內容的第一層，網頁中所有元素的內邊距 padding 預設都是 0，因此如果不做設定，內容都會貼近邊緣，如果要調整內邊距，需要使用下列幾種撰寫語法修改數值，數值的位置對應不同方向的內邊距 ( padding 沒有繼承特性 )：

下方的範例使用五個 div 呈現不同的 padding 的寫法，同時在 div 裡會放入一個 em，並將 em 修改顯示類型為 block 凸顯實際內容範圍。

線上展示：https://codepen.io/oxxo/pen/ZENZoBP

<!-- HTML 程式碼 -->
<div><em>預設值</em></div>
<div class="a"><em>padding: 20px 15px 10px 5px;</em></div>
<div class="b"><em>padding: 10px 20px 5px;</em></div>
<div class="c"><em>padding: 10px 20px;</em></div>
<div class="d"><em>padding: 10px;</em></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    height: 50px;
    border: 1px solid #000;
    background: orange;
    margin: 10px;
  }
  em {
    display: block;
    width: 100%;
    height: 100%;
    background : yellow;
  }
  .a{padding: 20px 15px 10px 5px;}
  .b{padding: 10px 20px 5px;}
  .c{padding: 10px 20px;}
  .d{padding: 10px;}
</style>

padding-* 單一內邊距

除了一次設定四個方向的 padding 數值，也可以透過單一內邊距的樣式屬性，單獨設定上下左右數值。

單一內邊距的權重與 padding 相同，有時會運用「撰寫順序」來覆寫特定方向的內邊距，下方的範例先將 div 的 padding 統一設定為 10px，再運用單一內邊距調整特定方向的寬度。

線上展示：https://codepen.io/oxxo/pen/LYovmBb

<!-- HTML 程式碼 -->
<div class="a"><em>padding-top: 40px;</em></div>
<div class="b"><em>padding-right: 40px;</em></div>
<div class="c"><em>padding-bottom: 40px;</em></div>
<div class="d"><em>padding-left: 40px;</em></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    height: 30px;
    border: 1px solid #000;
    background: orange;
    margin: 10px;
    padding: 10px;
  }
  em {
    display: block;
    width: 100%;
    height: 100%;
    background : yellow;
  }
  .a {padding-top: 40px;}
  .b {padding-right: 40px;}
  .c {padding-bottom: 40px;}
  .d {padding-left: 40px;}
</style>

padding 使用的長度單位

padding 使用的數值需要具有「長度單位」，支援相對長度和絕對長度，數值必須為「非負值」，長度單位如下表所示：

延伸閱讀：長度與角度單位

下方的範例使用不同長度單位設定元素的內邊距，注意 padding 就算是設定上下的數值，使用百分比為單位時，仍然是採用「父元素內容寬度」進行計算。

線上展示：https://codepen.io/oxxo/pen/yLWrjpw

<!-- HTML 程式碼 -->
<main>
  <div class="a"><em>padding: 10px;</em></div>
  <div class="b"><em>padding: 2em;</em></div>
  <div class="c"><em>padding: 1.5rem;</em></div>
  <div class="d"><em>padding: 10%;</em></div>
</main>

<!-- CSS 程式碼 -->
<style>
  :root {font-size: 20px;}  /* 根元素字型大小 20px */
  main {width: 400px;}      /* 父元素寬度 400px */
  div {
    width: 240px;
    height: 30px;
    border: 1px solid #000;
    background: orange;
    margin: 10px;
    font-size: 10px;         /* 元素本身字型大小 10px */ 
  }
  em {
    display: block;
    width: 100%;
    height: 100%;
    background : yellow;
  }
  .a {padding: 10px;}       /* 絕對長度       10px */
  .b { padding: 2em;}       /* 10px x 2    = 20px */
  .c {padding: 1.5rem;}     /* 20px x 1.5  = 30px */
  .d {padding: 10%;}        /* 400px x 10% = 40px */
</style>

除了使用單一種長度單位，padding 也支援多種長度單位混合使用，或使用 calc() 等 CSS 函式去計算長度，下方範例同時使用了四種不同長度單位呈現方式。

線上展示：https://codepen.io/oxxo/pen/dyELBoQ

<!-- HTML 程式碼 -->
<main>
  <div><em></em></div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {width: 200px;}
  div {
    border: 1px solid #000;
    background: orange;
    width: 150px;
    height: 100px;
    font-size: 20px;
    padding: 20px 1em 10% calc(10px * 2); /* 使用四種長度呈現方式 */
  }
  em {
    display: block;
    width: 100%;
    height: 100%;
    background: yellow;
  }
</style>

不可置換行內容器的 padding

雖然不可置換行內容器無法調整寬高 ( 文字樣式的顯示類型大多都是 inline )，但卻可以透過 padding 增加內邊距，進而改變寬度，不過由於行內容器的高度由字型大小和行高所管控，就算設定了 padding 數值，最多也只是覆蓋到其他行內元素，並不會影響整體高度。

不可置換行內容器表示不會透過 src 等屬性改變元素內容。

下方的範例設定了 strong 和 em 這兩個行內容器元素的 padding 數值，因為寬度改變而影響了左右的間距，但上下的 padding 雖然有發生作用，但卻不影響容器的行高表現，也不會影響整體的高度。

線上展示：https://codepen.io/oxxo/pen/XWwQYrX

<!-- HTML 程式碼 -->
<div>
  <span><strong>STEAM 教育學習網</strong>透過免費且高品質的<em>教學與範例</em>讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<span>hello world!!!!</span>

<!-- CSS 程式碼 -->
<style>
  div {border: 1px solid #000;}
  strong {
    padding: 10px;
    background: #ff550055;
  }
  em {
    padding: 100px 20px;
    background: #0000ff55;
  }
</style>

可置換行內容器的 padding

網頁中的圖片元素 img 或 svg 都屬於「可置換」行內容器 ( 顯示類型大多都是 inline-block )，這些元素原本就能設定寬高，而不是根據字型或行高決定容器大小，因此如果設定了 padding 數值，就會影響整體容器的或每一行文字的間距。

下方的範例在文字中插入一張圖片，當設定了圖片的 padding 數值，整體高度就會變多，且文字間的行距也會變高。

線上展示：https://codepen.io/oxxo/pen/bGyJKVZ

<!-- HTML 程式碼 -->
<div>
  <span>STEAM 教育學習網透過免費且高品質的教學與範例
    <img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<span>hello world!!!!</span>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
  }
  img {
    border: 1px solid #000;
    width: 50px;
    padding: 50px;
  }
</style>

padding 的背景延伸特性

因為 padding 也屬於容器內容的一部分，所以在預設狀態下，不論可置換元素還是不可置換元素，元素的「背景」都會延伸到 padding 所延展的區域 ( 可透過 background-clip 樣式修改 )，下方的範例會替所有元素加上背景色，可以觀察到背景色都延伸到 padding 所延展出的區域 ( 造成圖片元素也會出現背景的有趣效果 )。

線上展示：https://codepen.io/oxxo/pen/wvbZXWO

<!-- HTML 程式碼 -->
<div>
  <span><strong>STEAM 教育學習網</strong>透過免費且高品質的教學與範例
    <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="a"><em>hello world!!</em></div>    
</div>

<!-- CSS 程式碼 -->
<style>
  div {border: 1px solid #000;}
  img {
    border: 1px solid #000;
    width: 50px;
    padding: 50px;
    background: #00f5;
  }
  span {background: cyan;}
  strong {
    padding: 30px;
    background: #f005
  }
  .a {
    width: 100px;
    height: 100px;
    padding: 30px;
    background: orange;
  }
  em {
    display: block;
    width: 100%;
    height: 100%;
    background: green;
  }
</style>

小結

元素的內邊距 padding 其實很容易理解，在大部分的情況下也不容易出錯，排版實作時也常用來讓內容與邊緣保持距離，讓版面更為清爽舒適，在早期瀏覽器的定義不一致時，操作往往令人困擾，但在今時今日已經可以非常簡單的使用。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～