CSS inset Property: Syntax and Examples
Learn how CSS inset maps to top, right, bottom, and left, with syntax, examples, logical alternatives, and fixes for common positioning problems.
inset is the CSS shorthand for the physical offsets top, right, bottom, and left. It works on positioned elements, such as elements with position: absolute, fixed, relative, or sticky. One value sets all four sides; two set vertical and horizontal pairs; three set top, horizontal pair, bottom; and four set each side in order.
For example, position: absolute; inset: 0; places an absolutely positioned element against all four edges of its containing block. If the element is not positioned, inset has no effect. See MDN’s reference for the inset property.
Syntax and value order
inset: <top> {1,4} [<right> <bottom> <left>];The shorthand uses spaces between values, with no commas. Its order follows the same pattern as margin:
| Values | Applied sides | Equivalent longhands |
|---|---|---|
One: inset: 12px |
All sides | top: 12px; right: 12px; bottom: 12px; left: 12px |
Two: inset: 12px 24px |
Top and bottom; right and left | top: 12px; right: 24px; bottom: 12px; left: 24px |
Three: inset: 8px 16px 24px |
Top; right and left; bottom | top: 8px; right: 16px; bottom: 24px; left: 16px |
Four: inset: 8px 12px 16px 20px |
Top; right; bottom; left | top: 8px; right: 12px; bottom: 16px; left: 20px |
Examples you can copy
Uniform offset
.badge {
position: absolute;
inset: 12px;
}Different vertical and horizontal offsets
.panel {
position: absolute;
inset: 1rem 2rem;
}Stretch an overlay to its containing block
.scrim {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 45%);
}The containing block matters. For an absolutely positioned overlay intended to cover a particular card, make the card establish the containing block:
.card {
position: relative;
}
.card__scrim {
position: absolute;
inset: 0;
}Three values when the bottom differs
.callout {
position: fixed;
inset: 1rem 1.5rem 4rem;
}Set just one or two sides
The shorthand can also contain fewer than four sides with the remaining sides set to auto:
.top-right {
position: absolute;
inset: 0 auto auto 0;
}This sets top and left to zero, and right and bottom to auto. Use the longhand properties when that makes the intent easier to read.
Values, percentages, and global keywords
Each side accepts a length, a percentage, or auto. The shorthand also accepts CSS-wide keywords such as inherit, initial, revert, revert-layer, and unset.
- Lengths: values such as
0,8px,1rem, and2vw. - Percentages: left and right percentages are measured against the containing block’s width; top and bottom percentages are measured against its height.
auto: leaves that side’s offset to the positioning layout rules. It is not the same as zero.- Global keywords: set the shorthand according to CSS-wide cascade and inheritance behavior. For example,
inset: inheritinherits the computed inset values from the parent.
.positioned {
position: absolute;
inset: 10% 5%;
}In this example, the top and bottom are 10% of the containing block’s height, while right and left are 5% of its width. A percentage is not calculated from the positioned element’s own size.
Some current syntax references also describe anchor-related values. Support for newer syntax can vary; check compatibility for the browsers you target before relying on those values. MDN identifies the property as Baseline Widely available since April 2021, while noting that some parts of the latest syntax may have varying support. See MDN’s compatibility notes.
Physical inset versus logical offsets
inset always refers to physical top, right, bottom, and left. It does not change meaning for right-to-left text or vertical writing modes. If an offset should follow the text’s writing direction, use the logical properties inset-inline and inset-block.
.notice {
position: absolute;
inset-inline: 1rem 2rem;
inset-block: 0.5rem auto;
}inset-inline controls the inline start and end sides, while inset-block controls the block start and end sides. Their physical mapping depends on writing mode and direction. Read the references for inset-inline and inset-block.
Why inset may appear to do nothing
| Symptom | Likely cause | Fix |
|---|---|---|
| No visible movement | The element has the default position: static. |
Set an appropriate positioning mode, such as position: absolute or fixed. Relative and sticky elements are positioned too, though their layout behavior differs. |
| An absolute overlay covers the wrong area | Its containing block is not the intended ancestor. | Give the intended ancestor a positioning context, commonly position: relative, and keep the overlay inside it. |
| A percentage offset is unexpectedly large or small | The percentage is based on the containing block dimension for that axis. | Check the containing block’s width for left/right and height for top/bottom. Use a length such as rem if a fixed offset is intended. |
| Layout differs in RTL or vertical text | inset uses physical sides. |
Use inset-inline or inset-block for flow-relative placement. |
| One shorthand value overwrote other offsets | A shorthand declaration sets all four sides, replacing values from earlier inset longhands in the cascade. | Place declarations in the intended cascade order, or use the specific longhands where independent control is clearer. |
| An advanced value is rejected or ignored | The syntax may not be supported by the target browser. | Check current compatibility for that specific value and provide a conventional length or percentage fallback. |
Browser screenshots for checking inset layouts
When an inset layout depends on viewport size, writing direction, or a positioned ancestor, comparing screenshots at the relevant viewport sizes can make visual regressions easier to spot. A screenshot can confirm the rendered result, but it does not replace checking the containing block, positioning mode, or computed styles.
Or skip the browser setup
To capture a rendered page while checking a layout, call ScreenshotNeo’s screenshot API. For example, this cURL request saves a WebP screenshot:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
Performance, reliability, and cost notes
- CSS cost:
insetis a shorthand for offsets; choose values for clear layout intent. The property itself does not capture or inspect a page. - Reliability: use a positioned element and verify its containing block. For international layouts, logical offsets reduce dependence on physical direction.
- Visual review: check the viewport and writing modes that matter to the interface. A screenshot is useful evidence of a rendered state, but it cannot explain the CSS cause of a mismatch.
- Screenshot service cost: ScreenshotNeo’s free tier is 1,000 shots monthly; paid tiers are Starter $5/3,000, Growth $15/15,000, Pro $39/60,000, Scale $99/250,000, and Business $249/1,000,000. Yearly billing gives two months free, and every feature is on every plan.
FAQ
Is inset the same as margin?
No. The shorthand uses the same one-to-four-value side order as margin, but inset sets positional offsets, not outside spacing.
Can I use inset with position: relative?
Yes. Relative positioning is positioned, so inset offsets the element from its normal position. The space it would have occupied in normal flow remains reserved.
Does inset replace width and height?
No. It sets offsets. For an absolutely positioned element with opposing sides specified and automatic size, the layout rules can constrain or stretch its used size, but inset is not itself a width or height property.
Should I use inset or the four longhands?
Use the shorthand when the sides share a clear pattern. Use longhands when only a particular side should change or when separate declarations are easier to maintain.
