CSS inset-block-start Property

This logical property sets the distance between an element's block-start edge and its containing block, automatically mapping to the top, bottom, left, or right based on the writing mode.

selector { inset-block-start: value; }
auto The browser calculates the offset based on the default flow of the document.
<length> Sets a fixed distance from the block-start edge using units like px, em, or rem.
<percentage> Sets the offset as a percentage relative to the containing block's size in the block axis.

Code Examples

A basic example showing a positioned element offset from the top edge in a standard horizontal layout.

<div style="position: relative; height: 150px; background: #eeeeee; border: 2px solid #333333;">
  <div style="position: absolute; inset-block-start: 25px; background: #ffcc00; padding: 10px;">
    I am 25px from the start of the block flow.
  </div>
</div>

An advanced example using a vertical writing mode where inset-block-start maps to the right edge, featuring a JavaScript toggle.

<div id="layoutContainer" style="writing-mode: vertical-rl; position: relative; height: 200px; background: #f4f4f4; border: 1px solid #000000;">
  <div id="logicalBox" style="position: absolute; inset-block-start: 0; background: #0077cc; color: #ffffff; padding: 15px; cursor: pointer;">
    Click to Toggle Offset
  </div>
</div>
<script>
  const box = document.getElementById("logicalBox");
  box.addEventListener("click", () => {
    const current = box.style.insetBlockStart;
    box.style.insetBlockStart = (current === "50px") ? "0px" : "50px";
  });
</script>

Pro Tip

If you find yourself writing a lot of media queries just to flip your layout for RTL languages, stop. Switch your entire positioning strategy to logical properties like inset-block-start and inset-inline-start. You will find your CSS becomes much leaner and easier to maintain because the browser does the directional logic for you.

Deep Dive

Think of inset-block-start as a smart version of the top property. In a standard English layout where text flows from top to bottom, this property acts exactly like top. However, if you change the writing mode to something like vertical-rl, the block-start edge rotates to the right. By using this logical property instead of a physical one, your layout stays consistent with the content's flow regardless of the language or orientation. It effectively decouples your styling from the physical screen coordinates, allowing the browser to handle the heavy lifting when users switch between different reading directions.

Best Practices

Use this property when building internationalized websites or applications. It is much more efficient than writing multiple CSS overrides for different directions. It is best used in modern layouts where you want to maintain logical spacing relative to text flow, ensuring that headers or absolute elements stay where the reader expects them to be, even in vertical or right-to-left languages.

Common Pitfalls

The most frequent mistake is trying to use this property on an element with a position of static. Just like the physical top or bottom properties, inset-block-start requires the element to be positioned as relative, absolute, fixed, or sticky. Another issue is mixing logical properties with physical properties like top or margin-top on the same element, which can lead to specificity conflicts or unexpected layout behavior as the browser tries to resolve both.

Accessibility

Using logical properties helps maintain a predictable visual hierarchy for users of assistive technologies across various languages. By ensuring that elements are logically placed relative to the document flow, you make it easier for screen reader users and those with cognitive disabilities to navigate the interface in their native reading direction.

Dev Data Table: inset-block-start property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.insetBlockStart = "20px";
js_syntax_2 element.style.setProperty("inset-block-start", "20px");
js_note When manipulating this property in JavaScript, ensure the element has a position value other than static.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 63, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...