CSS inset-block-start property

Definition and Usage

inset-block-start The attribute sets the distance between the starting end of the element in the block direction and the parent element.

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

CSS inset-inline and inset-block properties are related to the CSS top,bottom,left and right properties are very similar, but inset-block and inset-inline The attribute depends on the block direction and the 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-start The result of the attribute. 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 starting end of the positioned <div> element in the block direction and the parent element:

div {
  inset-block-start: 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 starting end of the element moves to the right from the top:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Related Pages

Tutorial:CSS Positioning

Reference:CSS position property

Reference:CSS writing-mode attribute