CSS inset-block Property

inset-block is a shorthand logical property that sets the distance between an element and its containing block in the block dimension, which corresponds to top and bottom in a standard horizontal layout.

selector { inset-block: value; } | selector { inset-block: start-value end-value; }
auto The browser determines the offset distance based on the element's position and size.
<length> Sets a fixed distance from the block start and end edges using units like px, em, or rem.
<percentage> Defines the offset as a percentage of the containing block's size in the block axis.

Code Examples

A basic example showing an absolute positioned box with a 20px offset from the top and a 50px offset from the bottom.

<div style="position: relative; height: 200px; background: #cccccc;">
  <div style="position: absolute; inset-block: 20px 50px; background: #ff0000; color: #ffffff;">
    I am offset from the block start and end.
  </div>
</div>

An advanced example using inset-block to stretch a modal overlay to full height and toggling it via JavaScript.

<style>
  .modal-overlay {
    position: fixed;
    inset-block: 0;
    inset-inline: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
  }
</style>
<div id="overlay" class="modal-overlay"></div>
<button onclick="toggleOverlay()">Toggle Overlay</button>
<script>
  function toggleOverlay() {
    const el = document.getElementById("overlay");
    const isHidden = el.style.display === "none" || el.style.display === "";
    el.style.display = isHidden ? "block" : "none";
    if (isHidden) {
      el.style.insetBlock = "0px";
      console.log("Overlay active with color: #000000");
    }
  }
</script>

Pro Tip

You can use inset-block: 0; to quickly stretch an absolutely positioned element to fill the entire height of its parent container, as long as you also handle the inline axis.

Deep Dive

In the world of logical properties, we stop thinking about north, south, east, and west, and start thinking about flow. inset-block acts like a set of clamps on the vertical axis in a standard left-to-right environment. It maps directly to the inset-block-start and inset-block-end properties. If you pass one value, it applies to both sides. If you pass two, the first handles the start (top) and the second handles the end (bottom). This is critical for internationalization because if the writing-mode flips to vertical, these offsets rotate with the text, whereas top and bottom stay stuck to the screen edges.

Best Practices

Use inset-block instead of top and bottom when you want your layout to be future-proof for different languages or writing modes. It keeps your CSS leaner by handling two sides with one line of code.

Common Pitfalls

The biggest trip-up is forgetting that this property only works on positioned elements. If your element is still sitting at position: static, setting an inset-block value will do absolutely nothing. Also, remember that the order matters: start comes first, then end.

Accessibility

Make sure your offsets don't cause text to overlap or get cut off when a user increases their browser's default font size. Positioning elements too strictly can break the reading flow for vision-impaired users.

Dev Data Table: inset-block property

default auto
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.insetBlock = "20px 10px";
js_syntax_2 element.style.setProperty("inset-block", "50px");
js_note When manipulating this via JavaScript, remember that camelCase is used for the style object property, but the standard string is used for setProperty.
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...