CSS padding-block-start property

Previous Page padding-block-end
Next Page padding-bottom

Course Recommendation:

Definition and Usage padding-block-start refers to the space from the border to the content at the beginning of the block direction.

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

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

Example

Example 1

Sets the inner padding at the beginning of the block direction:

p {
  padding-block-start: 35px;
}

Try It Yourself

Example 2

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

div {
  writing-mode: vertical-rl;
  padding-block-start: 50px;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default. The default padding-block-start value of the element.
length	Specify padding-block-start in units such as px, pt, cm, etc. Negative values are not allowed. See:CSS Units.
%	Specify padding-block-start as a percentage of the parent element's inline size.
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.paddingBlockStart="100px"