padding-inline-start

padding-inline-start CSS 属性定义了一个元素的逻辑起始边距，根据该元素的书写模式、方向性和文本方向，它映射为一个物理边距。

尝试一下

语法

/* 长度值 */
padding-inline-start: 10px;   /* 绝对长度 */
padding-inline-start: 1em;    /* 相对于文本的大小 */

/* 百分比值 */
padding-inline-start: 5%;     /* 相对于区块容器的宽度边距 */

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

值

<length>

作为固定值的边距大小，必须为非负值。

<percentage>

作为百分比的边距大小，相对于包含块的内联大小（在 writing-mode 中定义的水平语言中为 width），必须是非负值。

描述

在规范中，padding-inline-start 属性被定义为与 padding-top 属性取值相同。然而，它所映射的物理属性取决于 writing-mode、direction 和 text-orientation 的值。因此，它可以映射到padding-top、padding-right 或 padding-left。

它与 padding-block-start (en-US)、padding-block-end (en-US) 和 padding-inline-end (en-US) 有关，它们定义了该元素的其他边距。

形式定义

初始值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
计算值as length
Animation typea length

形式语法

padding-inline-start = 
  <'padding-top'>

示例

设置垂直文字的起始内联边距

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

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

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

结果

规范

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

浏览器兼容性

BCD tables only load in the browser

参见