CSS padding-right Property

CSS padding-right 属性用于设置元素的右边内边距（即元素内容与元素边框的距离）。padding-right 属性可以与 padding-top、padding-bottom 和 padding-left 属性一起使用，以设置元素四个方向的内边距。

语法

padding-right: length|initial|inherit;

• length：指定元素的右边内边距长度。可以使用任何 CSS 长度单位来指定长度。
• initial：将属性设置为默认初始值。
• inherit：从父元素继承属性的值。

值

CSS padding-right 属性值可以用长度来表示，长度单位包括：

• px：像素（像素是相对长度单位，通常它在 CSS 中被视为方便的单位）。
• em：相对于当前元素的字体大小。em 是一个相对长度单位，通常在 CSS 中用于字体大小调整。
• rem：相对于根元素的字体大小。rem 是一个相对长度单位，通常在 CSS 中用于响应式布局和字体大小调整。

CSS padding-right 属性值也可以用百分数表示。百分数表示元素宽度的一定百分比。例如，如果设置 padding-right: 50%，则元素的右边内边距将等于元素宽度的一半。

示例

将元素的右边内边距设置为 20 像素

div {
  padding-right: 20px;
}

将元素的右边内边距设置为 1.5 倍元素字体大小

div {
  font-size: 16px;
  padding-right: 1.5em; /* 24px */
}

将元素的右边内边距设置为元素宽度的 20%

div {
  width: 200px;
  padding-right: 20%;
}

注意事项

• 使用 CSS padding-right 属性进行样式设置时，可以与 padding-top、padding-bottom 和 padding-left 属性一起使用，以设置元素四个方向的内边距。
• 当元素具有 position: absolute 或 position: fixed 属性时，CSS padding-right 属性值将相对于其最近的定位祖先元素而不是父元素计算。
• CSS padding-right 属性也可用于创建“响应式布局”，即在元素的内边距大小上根据设备屏幕尺寸自动调整元素的样式展示。