inset-block-start | CSS-Tricks

inset-block-start is a logical CSS property that sets the length that an element is offset in the block direction from its starting edge. It’s sort of like declaring top except its starting point is determined by the element’s direction, text-orientation and writing-mode, just like other logical properties.

The property is part of the CSS Logical Properties and Values Level 1 specification which is currently in Editor’s Draft status. That means the definition and information about it can change between now and official recommendation.

.element {
  inset-block-start: 50px;
  position: relative; /* Apples to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

So, for example, if the writing mode is set to horizontal-lr the inset-block-start property will act just like top and set the element’s offset from it’s starting edge, which is the top. You even need to specify an explicit position on the same element for it to take effect, just like top and other physical offset properties.

But change the element’s writing-mode to something like vertical-rl and the starting edge is rotated in the vertical direction, acting more like the left property.

Syntax

inset-block-start: <'top'>;

Initial value: auto
Applies to: positioned elements
Inherited: no
Percentages: as for the corresponding physical property
Computed value: same as corresponding top property
Animation type: by computed value type

Values

inset-block-start takes a length value and supports global keywords. Its default value is auto.

/* Length values */
inset-block-start: 50px;
inset-block-start: 4em;
inset-block-start: 3.5rem
inset-block-start: 25vh;

/* Percentage values */
inset-block-start: 50%;

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

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

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
No	No	63+	No	No	No

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
No	79+	No	No	No

Source: caniuse

Syntax

Values

Browser support

Demo

Related properties

Further reading

Need front-end development training?