inset
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.
Try it
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.
Syntax
css
/* <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;
Values
The inset
property takes the same values as the left
property.
Formal definition
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(); |
Formal syntax
Examples
Setting offsets for an element
HTML
html
<div>
<span class="exampleText">Example text</span>
</div>
CSS
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 |
---|
CSS Logical Properties and Values Level 1 # propdef-inset |
Browser compatibility
BCD tables only load in the browser
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.