inset
Set top, right, bottom, and left offsets for positioned elements.
Overview
| 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
Pin all sides
inset:* sets top, right, bottom, and left together. An absolutely positioned box with automatic width and height stretches between those edges.
<div class="rel h:10rem"> <div class="abs inset-md">Inset on all four sides</div></div>Generated CSS
@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .inset-md { inset: var(--spacing-md) }}Pin one side
Use individual side utilities to place an object against selected edges. This button keeps its content size and sits one md inset from the top and right of its positioned parent.
<div class="rel h:10rem"> <button type="button" class="abs right-md top-md">Close</button></div>Cover a positioned parent
Use abs inset:0 to cover the parent’s positioning area. Leave the overlay’s width and height automatic so the opposing insets can determine its size.
<div class="rel h:10rem"> <div class="abs inset:0">Overlay</div></div>Apply conditionally
Use selectors and conditional queries to change the behavior when a state or viewport condition applies. Focus the blue box with Tab to increase all four insets. The responsive class supplies a larger resting inset from sm upward.
<div class="rel h:10rem"> <div tabindex="0" class="abs inset-sm inset-xl:focus-visible inset-lg@sm"> Focus with Tab </div></div>