Layout

inset

Setting distance between an element and the parent element.

Class	Declarations
`top`	`top: 0;`
`right`	`right: 0;`
`bottom`	`bottom: 0;`
`left`	`left: 0;`
`inset:<offset>`	`inset: <offset>;`
`inset:<top>\|<right>\|<bottom>\|<left>`	`inset: <top> <right> <bottom> <left>;`
`top:<offset>`	`top: <offset>;`
`right:<offset>`	`right: <offset>;`
`bottom:<offset>`	`bottom: <offset>;`
`left:<offset>`	`left: <offset>;`
`ix:<offset>`	`inset-inline: <offset>;`
`ix:<inline-start>\|<inline-end>`	`inset-inline: <inline-start> <inline-end>;`
`iy:<offset>`	`inset-block: <offset>;`
`iy:<block-start>\|<block-end>`	`inset-block: <block-start> <block-end>;`
`ixs:<offset>`	`inset-inline-start: <offset>;`
`ixe:<offset>`	`inset-inline-end: <offset>;`
`iys:<offset>`	`inset-block-start: <offset>;`
`iye:<offset>`	`inset-block-end: <offset>;`

Examples

Use inset:* on positioned elements to set top, right, bottom, and left together.

inset:20px

<div>    <div class="rel inset:20px">inset:5x</div></div>

Generated CSS

@layer utilities {    .inset\:20px {        inset: 20px    }}

Use side utilities such as top:*, right:*, bottom:*, and left:* when only one edge should move.

<button class="abs top:0 right:0">    Close</button>

inset:0 is useful for overlays that should cover their positioned parent.

<div class="rel">    <div class="abs inset:0"></div></div>

Apply styles based on different states using selectors and conditional queries.

<div class="inset:0.625rem:hover inset:20px@sm inset:0@print">...</div>

Placing an element on the left or right side of its container.

Controlling whether an element should create a new stacking context.