CSS padding-inline property

Previous Page padding-bottom
Next Page padding-inline-end

Definition and Usage

The element's padding-inline It refers to the space from the border to the content in the inline direction. It is a shorthand attribute for the following properties:

padding-inline The value of the property can be set in different ways:

If the padding-inline property has two values:

padding-inline: 10px 50px;

The inner padding at the start is 10px
The inner padding at the end is 50px

If the padding-inline attribute has a value:

padding-inline: 10px;

The starting and ending ends of the padding are both 10px

CSS padding-inline and padding-block attributes are similar to CSS properties padding-top,padding-bottom,padding-left and padding-right is very similar, but padding-inline and padding-block The attribute depends on the inline direction and block direction.

Note:related CSS properties writing-mode and direction Defines the inline direction. This affects the starting and ending positions of the element in the inline direction, as well as padding-inline The result of the attribute. For English pages, the block direction is downward, and the inline direction is from left to right.

Instance

Example 1

Set the padding on both sides of the inline direction:

div {
  padding-inline: 50px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the attribute value is set to vertical-rl, the inline direction is downward. The result is that the starting end of the element is moved from the left to the top, and the ending end is moved from the right to the bottom:

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

Try It Yourself

Example 3

When the <div> element's direction When the attribute value is set to rtl, the inline direction is from right to left. The result is that the starting end of the element is moved from the left to the right, and the ending end is moved from the right to the left:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default. The default padding-inline distance of the element.
length	Specifies the distance in units such as px, pt, cm, etc. Negative values are not allowed. See:CSS Units.
%	Specifies the distance as a percentage of the size of the parent element in the inline direction.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.paddingInline="100px 20px"