W3cubDocs

/CSS

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.

While part of theCSS 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 1
The definition of 'inset' in that specification.
Editor's Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
inset No No 66 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
inset No No 66 No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/inset