内边距 ( padding )

网页元素容器由内而外的第一层就是“内边距”，可以使用 padding 控制样式，这篇教学会介绍网页元素的 padding，除了基本的单数值设定、多数值设定和长度单位，还会介绍可置换元素和不可置换元素使用 padding 时的差异。

请先阅读：容器盒子模型 ( box Model )

快速导览：

• padding 撰写语法
• padding-* 单一内边距
• padding 使用的长度单位
• 不可置换行内容器的 padding
• 可置换行内容器的 padding
• padding 的背景延伸特性

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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>

然而在这些单位中，如果使用“百分比 %”要特别小心，由于百分比单位是“父元素宽度”的百分比，若父元素使用 max-content 作为宽度时，不会考虑百分比单位所计算出的 padding 数值，会发生无法撑开父元素的状况，下方范例中会呈现使用像素 px 和使用百分比 % 的差异。

由于 max-content 会根据内容文字多寡以及“像素值”计算最大宽度，因此如果子元素使用“百分比”，表示子元素要乘以父元素宽度，而父元素宽度又要根据子元素改变，最后就会无法计算出真正的数值，详细参考：使用 max-content

线上展示：https://codepen.io/oxxo/pen/dPYRJjq

<!-- HTML 程式碼 -->
<div>
  <h2 class="a">padding: 20px; 撐開父元素</h2>
</div>
<div>
  <h2 class="b">padding: 10%; 父元素不變</h2>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    border: 1px solid #000;
    font-size: 10px;
    background: red;
    margin: 10px;
  }
  h2 {
    width: 250px;
    height: 100px;
    font-size: 20px;
    background: #fb0;
  }
  .a {padding: 20px;} /* 父元素寬度會計算像素單位數值 */
  .b {padding: 10%;}  /* 父元素寬度不會計算百分比單位數值 */
</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 其实很容易理解，在大部分的情况下也不容易出错，排版实作时也常用来让内容与边缘保持距离，让版面更为清爽舒适，在早期浏览器的定义不一致时，操作往往令人困扰，但在今时今日已经可以非常简单的使用。

意见反馈