The inset
CSS property, though part of the logical specification, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. It has the same multi-value syntax of the margin
shorthand. It is a shorthand that corresponds to the top
, right
, bottom
, and/or left
properties.
/* <length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /* Keyword value */ inset: auto; /* Global values */ inset: inherit; inset: initial; inset: unset;
Syntax
Values
The inset
property takes the same values as the left
property.
Formal definition
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | logical-height of containing block |
Computed value | same as box offsets: top , right , bottom , left properties except that directions are logical |
Animation type | a length, percentage or calc(); |
Formal syntax
<'top'>{1,4}
Examples
Setting offsets for an element
HTML
<div> <span class="exampleText">Example text</span> </div>
CSS
div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampleText { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'inset' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inset | Chrome No support No | Edge No support No | Firefox Full support 66 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 66 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support