CSS inset-block-end Property

This property sets the logical block-end offset of an element, acting like a smart version of the bottom property that respects writing direction.

selector { inset-block-end: value; }
auto The browser determines the offset based on the natural flow and the position of the element.
<length> Defines a fixed distance from the block-end edge using standard 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 an absolute element positioned 15 pixels from the logical bottom in a standard horizontal layout.

<div style="position: relative; height: 150px; border: 2px solid #222222; padding: 10px;">
  <div style="position: absolute; inset-block-end: 15px; background: #ffcc00; padding: 5px;">
    Anchored at the block-end.
  </div>
</div>

An advanced example showing how inset-block-end moves as the writing-mode changes, with JavaScript used to toggle the orientation.

<div id="container" style="position: relative; height: 200px; border: 3px solid #000000; writing-mode: horizontal-tb; transition: all 0.5s;">
  <div id="badge" style="position: absolute; inset-block-end: 10px; background: #007bff; color: #ffffff; padding: 8px;">
    Logic Box
  </div>
</div>
<button onclick="swapMode()">Switch Layout</button>
<script>
function swapMode() {
  const container = document.getElementById("container");
  const badge = document.getElementById("badge");
  if (container.style.writingMode === "horizontal-tb") {
    container.style.writingMode = "vertical-rl";
    badge.style.backgroundColor = "#28a745";
  } else {
    container.style.writingMode = "horizontal-tb";
    badge.style.backgroundColor = "#007bff";
  }
}
</script>

Pro Tip

If you need an element to hug the end of a block container regardless of the language, use inset-block-end: 0; inside a relative container. This is much more robust than trying to toggle between bottom: 0; and left: 0; using JavaScript or complex CSS selectors.

Deep Dive

Think of inset-block-end as an anchor that automatically finds the exit of a paragraph. In a standard English layout, that exit is at the bottom. However, in vertical layouts, like some East Asian scripts, that exit might be on the left or right. By using logical properties, you are telling the browser to place the element relative to the flow of the text rather than a physical side of the screen. It maps to bottom, top, left, or right depending on the writing-mode, direction, and text-orientation of the parent container.

Best Practices

Use this property whenever you are designing interfaces that need to be localized into multiple languages. It saves you from writing CSS overrides for RTL or vertical writing modes. Always pair this with a position property like relative or absolute, because like its physical counterparts, it will not affect static elements.

Common Pitfalls

A common mistake is assuming this always means the bottom of a container. While that is true for horizontal-tb mode, it changes as soon as the writing-mode changes. Also, remember that this property only defines the offset for the block-end; it does not set the width or height of the element unless used in combination with the block-start property.

Accessibility

Using logical properties ensures that your layout remains coherent for users with different language settings, maintaining a visual order that matches the logical reading order of their specific culture.

Dev Data Table: inset-block-end property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.insetBlockEnd
js_syntax_2 element.style.setProperty("inset-block-end", "20px")
js_note When manipulating logical properties in JavaScript, use camelCase for direct style access or the standard kebab-case string when using the setProperty method.
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...