CSS inset Property

Definition and Usage

The inset property is a shorthand for top, right, bottom, and left. It uses the same 1–4 value pattern as margin.

It only affects positioned elements (relative, absolute, fixed, or sticky). The offsets are physical, not logical — for writing-mode-aware sides use inset-block and inset-inline.

CSS Syntax

Like margin: one value = all sides; two = top/bottom then left/right; three = top, left/right, bottom; four = top, right, bottom, left. Each longhand starts as auto. The property is not inherited.

Property Values

How to Use inset

Position the element first, then set offsets with inset.

1. Make a containing block if needed (often position: relative on the parent).
2. Set the child to position: absolute (or fixed / sticky / relative).
3. Apply inset with one to four length or percentage values.
4. Use inset: 0 when you want an absolute child to stretch and fill the parent.

Live Preview

The blue box is position: absolute inside a relative stage. Change only inset.

CSS Examples

Each snippet focuses on inset. Position is required so the offsets apply. Use Try It Yourself for a live editor.

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    inset: 16px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">inset: 16px</div>
</div>

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    inset: 0;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">inset: 0</div>
</div>

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    inset: 10px 20px 30px 40px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">T R B L</div>
</div>

Key Takeaways