CSS padding-inline-start attribute

Previous Page padding-inline-end
Next Page padding-left

Definition and Usage

element's padding-inline-start attributes refer to the space from the border to the content at the starting point 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 are 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-start 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

Sets the padding at the start of the inline direction:

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

Try It Yourself

Example 2

Sets the writing-mode When the attribute value is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top:

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

Try It Yourself

Example 3

Sets the direction When the attribute value is set to rtl, the inline direction is from right to left. The result is that the starting position of the element moves from the left to the right:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default. The default padding-inline-start 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 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.paddingInlineStart="100px"