Mfano wa padding-inline-start wa kifaa cha CSS

定义和用法

元素的 padding-inline-start 属性指的是在行内方向起始处,从边框到内容的空间。

CSS padding-inlinepadding-block 属性与 CSS 属性 padding-toppadding-bottompadding-leftpadding-right 非常相似,但 padding-inlinepadding-block 属性依赖于行内方向和块方向。

注意:相关的 CSS 属性 writing-modedirection 定义了行内方向。这会影响元素在行内方向上的起始和结束位置,以及 padding-inline-start 属性的结果。对于英文页面,块方向是向下,行内方向是从左到右。

实例

例子 1

在行内方向的起始处设置内边距:

div {
  padding-inline-start: 50px;
}

亲自试一试

例子 2

元素的 writing-mode 属性值设置为 vertical-rl 时,行内方向是向下的。结果是元素的起始位置从左侧移动到顶部:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

亲自试一试

例子 3

元素的 direction 属性值设置为 rtl 时,行内方向是从右到左的。结果是元素的起始位置从左侧移动到右侧:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

亲自试一试

CSS 语法

padding-inline-start: auto|value|initial|inherit;

属性值

描述
auto 默认。元素的默认 padding-inline-start 距离。
length

指定以 px、pt、cm 等为单位的距离。不允许使用负值。

请参阅:Mafaa ya CSS ya Kina.

% 指定相对于父元素在行内方向上大小的百分比距离。
initial Kuwa na mafanikio ya kuzikwenda kutoka kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kuwa na mafanikio ya kuzikwenda kutoka kwa kina yake ya mmoja. Tazama: inherit.

Mafanikio ya kidhako

Chaguo cha kuzingatia: auto
Kuwa na mafanikio ya kuzikwenda Hakuna
Mawimbi: Inaonesha. Tazama:Mafanikio ya mawimbi.
Mwaka: CSS3
Inayofanywa kwa lugha ya JavaScript: object.style.paddingInlineStart="100px"

Kuwa na msaada wa kifungu

Jina za tabaki zinaanza kwa msingi wa kufaa kwa kufikiria na kufungua sababu.

Chrome Edge Firefox Safari Opera
87.0 87.0 41.0 12.1 73.0

Makutano ya kijana

Tunakita:Mfano wa CSS direction

Tunakita:Mfano wa padding-inline wa kifaa cha CSS

Tunakita:Mfano wa padding-inline-end wa kifaa cha CSS

Tunakita:Mfano wa padding-bottom wa kifaa cha CSS

Tunakita:Mfano wa padding-left wa kifaa cha CSS

Tunakita:Mfano wa padding-right wa kifaa cha CSS

Tunakita:Mfano wa padding-top wa kifaa cha CSS

Tunakita:Mwongozo wa writing-mode wa CSS