CSS inset-block-end attribute

Previous Page inset-block
Next Page inset-block-start

Definition and Usage

inset-block-end property to set the distance between the end of the element and the parent element in the block direction.

Note:To make this property take effect, you must specify position properties.

CSS's inset-inline and inset-block properties are similar to CSS's top,bottom,left and right properties are very similar, but inset-block and inset-inline The property depends on the block direction and line direction.

Note:related CSS properties writing-mode Defines the block direction. This affects the starting and ending positions of the block, as well as inset-block-end The result of the property. For English pages, the block direction is downward, and the line direction is from left to right.

Example

Example 1

Sets the distance between the end of the positioned <div> element and the parent element in the block direction:

div {
  inset-block-end: 50px;
}

Try It Yourself

Example 2

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

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

Try It Yourself

CSS Syntax

inset-block-end: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default Value. The default insertion distance of the element.
length	Specifies the distance in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies the percentage distance relative to the size of the parent element on the corresponding axis.
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.insetBlockEnd="100px"