CSS padding-inline-end property

Previous Page padding-inline
Next Page padding-inline-start

Definition and Usage

The element's padding-inline-end refers to the space from the element's border to the content at the end of the inline direction.

CSS padding-inline and padding-block properties are similar to the CSS properties padding-top,padding-bottom,padding-left and padding-right very similar, but padding-inline and padding-block The property 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-end The result of the property. For English pages, the block direction is downward, and the inline direction is from left to right.

Instance

Example 1

Set the padding at the end of the inline direction:

div {
  padding-inline-end: 50px;
}

Try It Yourself

Example 2

Sets the direction of the <div> element to: writing-mode When the property value is set to vertical-rl, the inline direction is downward. The result is that the end position of the element moves from the right to the bottom:

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

Try It Yourself

Example 3

Sets the direction of the <div> element to: direction When the property value is set to rtl, the inline direction is from right to left. The result is that the end position of the element moves from the right to the left:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
auto	Default Value. The default padding-inline-end distance of the element.
length	Specifies a distance in units such as px, pt, cm, etc. Negative values are not allowed. See:CSS Units.
%	Specifies a percentage distance relative to 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.paddingInlineEnd="100px"