padding-block-end

Baseline Widely available

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

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.

CSS 属性 padding-block-end 定义了元素的逻辑块末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下

padding-block-end: 20px;
writing-mode: horizontal-tb;

padding-block-end: 20px;
writing-mode: vertical-rl;

padding-block-end: 5em;
writing-mode: horizontal-tb;

padding-block-end: 5em;
writing-mode: vertical-lr;

<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;
  unicode-bidi: bidi-override;
}

语法

css
/* <length> 值 */
padding-block-end: 10px; /* 绝对长度 */
padding-block-end: 1em; /* 相对于文本尺寸的长度 */

/* <percentage> 值 */
padding-block-end: 5%; /* 相对于包含区块宽度的内边距 */

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

取值

<length>

以固定值指定的内边距尺寸。必须非负。

<percentage>

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的宽度，由 writing-mode 所定义）。必须非负。

描述

虽然规范定义 padding-block-end 属性的取值与 padding-top 属性相同，但是此属性所对应的实体属性取决于 writing-mode、direction 和 text-orientation 所设置的值。因此这一属性可能对应于 padding-bottom、padding-right 或 padding-left。

与此相关的属性有 padding-block-start、padding-inline-start 和 padding-inline-end，这些属性定义了元素的其他内边距。

形式定义

初始值0
适用元素all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
是否是继承属性否
Percentageslogical-width of containing block
计算值为 <length> 值
动画类型a length

形式语法

padding-block-end = 
  <'padding-top'>  

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

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

示例

为竖排文本设置块末内边距

HTML

html
<div>
  <p class="exampleText">示例文本</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}

结果

规范

Specification
CSS Logical Properties and Values Level 1
# padding-properties

浏览器兼容性

参见