首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

填充块开始 | padding-block-start

这是一种实验技术

由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。还要注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

padding-block-start 映射到取决于元件的写入模式,方向性,和文本方向的物理填充的逻辑块开始填充。它对应于padding-toppadding-rightpadding-bottom,或padding-left属性根据为定义的值writing-modedirectiontext-orientation

它与padding-block-endpadding-inline-start,和padding-inline-end定义元素的其他填充。

代码语言:javascript
复制
/* <length> values */
padding-block-start: 10px;      /* An absolute length */
padding-block-start: 1em;       /* A length relative to the text size */

/* <percentage> value */
padding-block-start: 5%;        /* A padding relative to the block container's width */

/* Global values */
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: unset;

初始值

0

应用于

all elements

是否继承

no

百分比

logical-width of containing block

使用媒体

visual

计算值

as <length>

Animation type

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

句法

价值

padding-block-start属性采用与该padding-left属性相同的值。

形式语法

代码语言:javascript
复制
<'padding-left'>

HTML内容

代码语言:javascript
复制
<div>
  <p class="exampleText">Example text</p>
</div>

CSS内容

代码语言:javascript
复制
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

规格

Specification

Status

Comment

CSS Logical Properties Level 1The definition of 'padding-block-start' in that specification.

Editor's Draft

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

No support

41.0 (41.0)1

No support

No support

No support

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

No support

41.0 (41.0)1

No support

No support

No support

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com