padding-inline
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
尝试一下
属性构成
此属性为下列 CSS 属性的简写属性:
语法
css
/* <length> 值 */
padding-inline: 10px 20px; /* 绝对长度 */
padding-inline: 1em 2em; /* 相对于文本尺寸 */
padding-inline: 10px; /* 同时设置行首和行末值 */
/* <percentage> 值 */
padding-inline: 5% 2%; /* 相对于最近包含区块的宽度 */
/* 全局值 */
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert-layer;
padding-inline: unset;
padding-inline
属性可用一个或两个值指定。若给一值,则此值同时用于 padding-inline-start
和 padding-inline-end
。若给两值,则第一个用于 padding-inline-start
而第二个用于 padding-inline-end
。
取值
<length>
-
以固定值指定的内边距尺寸。必须非负。
<percentage>
-
以百分比指定的内边距尺寸,参照包含区块的行向尺寸(即横向语言中的宽度,由
writing-mode
所定义)。必须非负。
描述
根据 writing-mode
、direction
和 text-orientation
所定义的值,此属性的值对应于 padding-top
和 padding-bottom
,或者 padding-right
和 padding-left
属性。
形式定义
形式语法
padding-inline =
<'padding-top'>{1,2}
<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-rl;
padding-inline: 20px 40px;
background-color: #c8c800;
}
结果
规范
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-padding-inline |
浏览器兼容性
BCD tables only load in the browser