CSS inset-block attribute

Previous Page inset
Next Page inset-block-end

Definition and usage

inset-block The distance between the attribute setting element and the parent element in block direction.

Note:To make this attribute effective, you must specify position attributes.

inset-block The attribute is a shorthand for the following attributes:

inset-block-start
inset-block-end

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

If the inset-block attribute has two values:

inset-block: 10px 50px;

The starting distance is 10px
The ending distance is 50px

If the inset-block attribute has a value:

inset-block: 10px;

The starting and ending distances are both 10px

CSS's inset-block and inset-inline properties are related to CSS's top,bottom,left and right The attribute is very similar to, but different from inset-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 block, as well as inset-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 distance between the positioned <div> element and its parent element in the block direction:

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

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 {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default Value. The default inset-block value of the element.
length	Specifies the distance with units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies the percentage distance from the corresponding axis relative to the parent element.
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.insetBlock="100px 50px"