The inset
CSS property is a shorthand that corresponds to the top
, right
, bottom
, and/or left
properties. It has the same multi-value syntax of the margin
shorthand.
While part of the ' CSS Logical Properties specification, it does not define logical offsets. It defines physical offsets, regardless of the element's writing mode, directionality, and text orientation.
/* <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 1The 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.
Update compatibility data on GitHub
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
See also
- The longhand box offset properties:
top
,right
,bottom
, andleft
. - The mapped logical shorthands:
inset-block
andinset-inline
- The
margin
shorthand multi-value syntax.
inset by Mozilla Contributors is licensed under CC-BY-SA 2.5.