CSS inset-inset Property

The inset property is a shorthand that sets the top, right, bottom, and left offsets of a positioned element in one line.

selector { inset: <top> <right> <bottom> <left>; }
auto Lets the browser determine the distance based on other positioning properties.
<length> Sets a fixed distance using units like px, em, or rem.
<percentage> Sets the distance as a percentage of the containing block's width or height.

Code Examples

A basic example showing an absolute element pinned 20 pixels from every edge of its parent container.

<div style="position: relative; width: 400px; height: 200px; background: #333333;">
  <div style="position: absolute; inset: 20px; background: #007bff; color: #ffffff; padding: 10px;">
    This box is inset 20px from all sides of its parent.
  </div>
</div>

An advanced example using inset: 0 to create a full-screen modal overlay that is toggled via JavaScript.

<div id="overlay" style="position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; z-index: 999;">
  <div style="background: #ffffff; width: 300px; margin: 100px auto; padding: 20px; text-align: center;">
    <h2>System Alert</h2>
    <button onclick="toggleUI()">Close Overlay</button>
  </div>
</div>
<button onclick="toggleUI()">Launch Overlay</button>
<script>
function toggleUI() {
  const ui = document.getElementById("overlay");
  const isHidden = ui.style.display === "none" || ui.style.display === "";
  ui.style.display = isHidden ? "block" : "none";
  if (isHidden) {
    ui.style.inset = "0px";
  }
}
</script>

Pro Tip

If you want to perfectly center an absolute element within its parent, set inset: 0; and margin: auto; while giving the element a specific width and height. This is a bulletproof way to center items without using complex transform calculations or old-school math tricks.

Deep Dive

Think of the inset property like the matte in a picture frame. When you have an element that is positioned as absolute, fixed, or sticky, inset defines how far its edges are pushed inward from the boundaries of its parent container. Instead of writing four separate lines for top, right, bottom, and left, you use this single shorthand. It follows the exact same multi-value syntax as margin and padding. One value applies to all four sides equally. Two values apply to top/bottom and left/right. Three values handle top, left/right, and then bottom. Four values go clockwise starting from the top. It is part of the logical properties spec, aimed at making your CSS more concise and easier to manage as layouts grow in complexity.

Best Practices

Use inset: 0; when you need an element to completely fill its parent container, such as with background overlays or full-screen modals. It is much cleaner than writing out four separate properties. Always pair inset with a position value like absolute or fixed, because it will have zero effect on static elements. Using this shorthand makes your stylesheets more readable for other developers and reduces the overall file size of your CSS.

Common Pitfalls

The most common mistake is trying to use inset on an element that still has position: static, which is the default for all elements. If it is not positioned, inset does nothing. Another slip-up is getting the clockwise order wrong when using four values. Remember: Top, Right, Bottom, Left. If your element is not appearing where you expect, double-check that the parent container has position: relative or some other positioning context defined.

Accessibility

Inset is primarily a visual layout tool and does not directly affect screen readers. However, be careful when using it to visually move elements far away from their original spot in the DOM. If the visual order of your content does not match the source code order, keyboard users navigating via the Tab key might get confused as the focus jumps around the screen unpredictably.

Dev Data Table: inset-inset property

default auto
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.inset = "10px 20px";
js_syntax_2 element.style.setProperty("inset", "0px");
js_note When manipulating this property in JavaScript, the value must be passed as a string and follows the same 1 to 4 value shorthand logic used in CSS.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...