Atributo CSS padding-inline-end

Página anterior padding-inline
Página siguiente padding-inline-start

Definition and usage

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 attributes are similar to the CSS attributes padding-top,padding-bottom,padding-left and padding-right 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-end 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 at the end of the inline direction:

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

Try it yourself

Example 2

Sets 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 ending 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 <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 ending 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;

Attribute value

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