padding-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

padding-bottom CSS 属性设置了元素底部内边距区域的高度。

尝试一下

padding-bottom: 1em;

padding-bottom: 10%;

padding-bottom: 20px;

padding-bottom: 1ch;

padding-bottom: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

内边距区域是指一个元素的内容和边框之间的区域。

CSS padding-bottom 属性对元素盒子的影响

备注： 通过 padding 属性，只需一次声明，就可以为元素的所有四边设置内边距。

语法

css
/* <length> 值 */
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/* <percentage> 值 */
padding-bottom: 10%;

/* 全局值 */
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: revert;
padding-bottom: revert-layer;
padding-bottom: unset;

padding-bottom 属性可以从下面的列表中指定一个值。与 margin 不同，padding 不允许使用负值。

值

<length>

作为定值的内边距尺寸。必须是非负值。

<percentage>

相对于包含块的行内尺寸（水平语言中的宽度，由 writing-mode 定义）的百分比。必须是非负值。

形式定义

初始值0
适用元素all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
是否是继承属性否
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
动画类型a length

形式语法

padding-bottom = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

使用像素和百分比值设置下内边距

css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}

规范

Specification
CSS Box Model Module Level 3
# padding-physical

浏览器兼容性

参见