CSS padding-block property

Previous Page padding
Next Page padding-block-end

Definition and Usage

element's padding-block It refers to the space between the border and the content in the block direction, which is a shorthand for the following properties:

padding-block 属性的值可以通过不同的方式设置：

The value of the attribute can be set in different ways:

padding-block: 10px 50px;

If the padding-block attribute has two values:
The padding at the beginning is 10px

The padding at the end is 50px

If the padding-block attribute has one value:

padding-block: 10px;

The padding at the beginning and end is 10px padding-block are very similar, but and CSS properties are similar to CSS propertiespadding-bottompadding-toppadding-bottom, are very similar, but padding-left padding-right padding-block are very similar, but and padding-inline

The attribute depends on the block direction and inline direction.Note: writing-mode Defines the block direction. This affects the starting and ending positions of the block and related CSS properties 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

Set the padding on both sides of the block direction:

p {
  padding-block: 35px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the attribute value is set to vertical-rl, the starting position of the element moves from the top to the right, and the ending position moves from the bottom to the left:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default Value. The default padding-block value of the element.
length	Specify padding-block in units such as px, pt, cm, etc. Negative values are not allowed. See:CSS Units.
%	Specify padding-block 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 Production:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.paddingBlock="100px 50px"