padding-right

Baseline Widely available

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

padding-right CSS 属性设置了元素右侧内边距区域的宽度。

尝试一下

元素的内边距区域是其内容和边框之间的空间。

备注: 通过 padding 属性,只需一次声明,就可以为元素的所有四边设置内边距。

语法

css
/* <length> 值 */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/* <percentage> 值 */
padding-right: 10%;

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

padding-right 属性可以从下面的列表中指定一个值。与 margin 不同,padding 不允许使用负值。

<length>

作为定值的内边距尺寸。必须是非负值。

<percentage>

相对于包含块的行内尺寸(水平语言中的宽度,由 writing-mode 定义)的百分比。必须是非负值。

形式定义

初始值0
适用元素all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
动画类型a length

形式语法

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

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

示例

使用像素和百分比值设置右内边距

css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}

规范

Specification
CSS Box Model Module Level 3
# padding-physical

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding-right

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见