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.
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: revert; inset: revert-layer; inset: unset;
The inset
property takes the same values as the left
property.
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
Computed value | as each of the properties of the shorthand:
|
Animation type | a length, percentage or calc(); |
<div> <span class="exampleText">Example text</span> </div>
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; }
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
inset |
87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |
top
, right
, bottom
, and left
.inset-block
and inset-inline
margin
shorthand multi-value syntax.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/inset