Inset - Property CSS
Summary of characteristics of the inset property
top, right, bottom and left.autoautoComputed value: during an animation, the inset property gradually changes from one value to another.Per grammar: serialization in the order of syntax.Syntax diagram of inset.
inset property.The links in the diagram provide more details about the values.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a numerical value followed by one of CSS dimension units.%is a percentage calculated relative to the corresponding dimension of the parent block.- The syntax can be repeated from 1 to 4 times.
Description of the inset property.
The inset property sets the location of an element that is positioned differently than static, that is, those for which the position
property has one of the values absolute, fixed, relative, or sticky. It has no effect on non-positioned
elements, that is, elements for which the position property has its initial value or static.
Refer to the position property for more details on element positioning.
inset is actually a shorthand property for the four properties top, right, bottom, and left.
Contrary to what one might think, it is not a shortcut for inset-block and inset-inline, because these two properties are sensitive to writing
direction and flow, whereas inset is not.
Language support.
If the positioning needs to be relative to the writing mode, it is better to use the inset-inline and inset-block properties,
or the corresponding detailed properties.
topleftrightbottomValues for inset.
- inset: auto;
The position of the element is determined by the browser.
- inset: 15px 25px 30px 50px; a b c d
From one to four values, separated by spaces, and followed by a unit of measurement (see CSS dimension units). Each of these values defines the distance from one of the element's edges to the reference:
- The page, if the element is positioned absolutely.
- The screen, if the element is positionedfixed.
- Etc.Depending on the number of values present in the syntax, the browser will need to handle them as follows:
A single value
It applies to all sides.
Two values
The first applies to the top and bottom edges, and the second to the left and right edges.
Three values
They are applied according to the above diagram.
<Four values
They each apply to one of the 4 sides, starting from the top.If the values are expressed as percentages, they are calculated relative to the dimensions of the parent block.
If the dimensions of the element are not set (values of
widthandheightequal toauto), it can be resized to meet the constraints defined byinset. If the dimensions of the element are fixed, there may be a conflict with theinsetproperty. In this case, the values corresponding tobottomandrightwill be ignored. - inset: initial; (
auto) inset: inherit; inset: revert; inset: revertLayer; inset: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,unset.
Animation of the inset property.
Movable elements can easily be created by fixing their position (here as relative) and applying an animation to the inset property.
Manipulating the inset property programmatically.
With Javascript, change the value of inset.
Here are two examples of code to modify, in JavaScript, the value of the [inset] property.
let el = document.getElementById('id');
el.style['inset'] = '1cm 2%';
// or
let el = document.getElementById('id');
el.style.inset = '1cm 2%';
With Javascript, read the value of inset.
And two examples to read the value of the property. Attention! It must have been set in the HTML code via the style attribute, and not
through a CSS selector. Both of these codes return the value in the same form and with the same units as when it was defined.
let el = document.getElementById('id');
let value = el.style['inset'];
// or
let el = document.getElementById('id');
let value = el.style.inset;
With Javascript, read the computed value of inset.
To retrieve the computed value of inset, use the code below. The returned value is either the word auto, or one to four pixel values,
even if other units were used to set the property in the styles sheet. The computed value is always defined.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('inset');
With JQuery, change the value of inset.
With jQuery, you can find comparable code.
$('#id').css('inset', '1cm 2%');
With Javascript, read the value of inset.
let value = $('#id').css('inset');
Other code examples.
Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the inset property and then display either the value as it was applied (first button) or the
computed value (second button). This second option allows you to see how the value of inset is stored (serialized). Notably, all other units
are converted to pixels, except percentages, which are stored as percentages (see the chapter on inheritance).
Simulator.
The simulator acts on the blue block, which is initially located on the left of its parent block. The blue block is in absolute position and
therefore positions itself at the beginning of its parent, which is in relative position. Since the dimensions of the blue block are set to
auto, its dimensions can vary to comply with the values provided by inset. However, you can set the width and/or height of the
blue block, in which case the 2nd and 3rd values of inset are ignored, as they correspond to positioning from the right
and the bottom.
By changing the language, you will notice that the property inset is indeed a physical property (which does not adjust to the writing mode)
since the position of the block does not change depending on the language.
relative.
positioned
absolutely
position:absolute;Browsers compatibility with inset.
The handling of inset is correct, except for Internet Explorer 
since, at the time, this property did not exist.
inset shorthand property, which sets the position for positioned elements (whose position property is different from static).top, right, bottom, and left.insetproperty
top, right,bottom and leftBrowsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Historic of the inset property.
-
CSS Logical Properties and Values Level 1
Regardinginset. Summary of physical properties.
May 18, 2017Working Draft.
-
CSS Positioned Layout Module Level 3
Regardinginset. No change regarding theinsetproperty.February 07, 2012Working Draft.
See also, regarding the placement of the blocks.
CSS specifications published by the W3C are organized into modules. The inset property is described in the CSS Positioned Layout Module.
The following definitions are also described in the same module.
Properties:
top, right, bottom and left.inset-block-start and inset-block-end.inset-inline-start and inset-inline-end.