CSS padding-block-end attribute

Previous Page padding-block
Next Page padding-block-start

Definition and Usage

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

CSS padding-block and padding-inline properties are similar to the CSS property 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

Set the padding at the end of the block direction:

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

Try It Yourself

Example 2

Set the <div> element's writing-mode When the attribute value is set to vertical-rl, the block direction is from right to left. The result is that the element's end position moves from the bottom to the left:

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

Try It Yourself

CSS Syntax

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

Attribute Value

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