inset-block-start - CSS: Cascading Style Sheets 编辑

The inset-block-start CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

/* <length> values */
inset-block-start: 3px;
inset-block-start: 2.4em;

/* <percentage>s of the width or height of the containing block */
inset-block-start: 10%;

/* Keyword value */
inset-block-start: auto;

/* Global values */
inset-block-start: inherit;
inset-block-start: initial;
inset-block-start: unset;

Syntax

Values

The inset-block-start property takes the same values as the left property.

Formal definition

Initial value	auto
Applies to	positioned elements
Inherited	no
Percentages	logical-height of containing block
Computed value	same as box offsets: top, right, bottom, left properties except that directions are logical
Animation type	a length, percentage or calc();

Formal syntax

<'top'>

Examples

Setting block start offset

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1 The definition of 'inset-block-start' in that specification.	Editor's Draft	Initial definition

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• The properties which defines other insets: inset-block-end, inset-inline-start, and inset-inline-end
• The mapped physical properties: top, right, bottom, and left
• writing-mode, direction, text-orientation