CSS inset Property

What You’ll Learn

The inset property is a shorthand for setting all four offset sides at once. It simplifies absolute, fixed, and sticky positioning in modern CSS.

Introduction

The inset property in CSS is a shorthand for setting the top, right, bottom, and left properties all at once. It reduces repetition and makes positioning rules easier to read.

The property is especially useful with position: absolute and position: fixed, where you need precise control over how far an element sits from each edge of its containing block.

Definition and Usage

Apply inset on positioned elements inside a containing block. The parent usually needs position: relative for absolute children, or the viewport acts as the containing block for fixed elements.

📝 Syntax

The syntax for the inset property follows the same value-count rules as margin and padding:

element {
  inset: top right bottom left;
}

• One value — applies to all four sides.
• Two values — first applies to top and bottom; second to left and right.
• Three values — first to top; second to left and right; third to bottom.
• Four values — top, right, bottom, left (clockwise).

Basic Example

.box {
  position: absolute;
  inset: 10px 20px 30px 40px;
}

Default Value

The default value of the inset property is auto for all sides, meaning no explicit offset is applied until you set one.

Syntax Rules

• Only works when position is not static.
• Shorthand for top, right, bottom, and left.
• The property is not inherited.
• Accepts length, percentage, and auto values.
• Also maps to logical inset longhands in supporting browsers.

💎 Property Values

Requires Positioned Elements

inset controls offset distances from the edges of a containing block. It works with these position values:

• position: absolute — offsets relative to the nearest positioned ancestor.
• position: fixed — offsets relative to the viewport.
• position: sticky — offsets apply when the element becomes stuck.
• position: relative — offsets shift the element from its normal position.

Examples Gallery

Set four offset values, stretch with inset: 0, use two-value shorthand, and pin a fixed toast to the viewport.

.box {
  position: absolute;
  inset: 10px 20px 30px 40px;
  background-color: #fb923c;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.85);
}

.box {
  position: absolute;
  inset: 20px 40px;
}

.toast {
  position: fixed;
  inset: 1rem 1rem auto auto;
}

♿ Accessibility

• Fixed overlays can trap focus — Ensure modals and dialogs manage keyboard focus correctly.
• Do not cover essential content — Toasts and pinned UI should not hide critical page controls.
• Support zoom and small screens — Test inset values on mobile viewports.
• Announce dynamic toasts — Use role="status" or live regions for notifications.
• Keep logical tab order — Positioning with inset does not change DOM reading order.

💡 Best Practices