Inset-block, inset-inline, etc. CSS properties.
And the logical properties:
inset-block-startinset-block-endinset-inlineinset-inline-start and inset-inline-end.inset-inline-startinset-inline-endSummary of characteristics of the inset-block property
inset-block-start and inset-block-end.autoblock direction.autoComputed value: during an animation, the inset-block property gradually changes from one value to another.Per grammar: serialization in the order of syntax.Syntax diagram of inset-block.
inset-block
inset-inline
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a numeric value followed by one of CSS dimension units.%is a percentage calculated relative to the corresponding dimension of the parent element.
Description of inset-block and inset-inline properties.
The properties inset-block and inset-inline define the location of a non-static element (whose position property
is not set to static), or more precisely the location of one of the edges of the element.
The two properties inset-block and inset-inline are short-hand for the following four properties:
| Short-hand properties | Individual properties |
|---|---|
inset-block | inset-block-start |
inset-block-end | |
inset-inline | inset-inline-start |
inset-inline-end |
These four individual properties are therefore equivalent to the properties top, right, bottom, and left,
except that they depend on the writing direction and writing mode (see explanations on writing modes (Writing Mode) here:
writing modes).
The inset... properties affect positioned elements, that is, those for which the property position has one of the values
absolute, fixed, relative, or sticky. They have no effect on non-positioned elements, that is,
elements for which the property position has its initial value or static. Refer to the position property for more
details on element positioning.
Conflicts may arise: for example, it may be impossible to set the distance from the right edge and from the left edge at the same time.
To resolve these conflicts, the element can be resized if its dimensions are not specified or are set to auto.
However, if the element's dimensions are defined, the values on the end side are ignored.
Here is an illustration with the property inset-inline. The mechanism is identical for inset-block.
width:auto;
inset-inline:100px 100px;The element is resized to satisfy 100 pixels on each side.
width:400px;
inset-inline:100px 100px;The value of the
end side is ignored.
Language support.
inset-block and inset-inline are logical properties, that is to say they take into account the direction and the writing sense.
For example, Latin languages are written from left to right, then from top to bottom. The diagram below shows the influence of the language on these properties.
topleftrightbottomYou can also consult a general presentation on writing modes depending on the languages.
Syntaxes for inset-block and inset-inline.
- inset-block: auto; inset-inline: auto;
The position of the element is determined by the browser. It is generally the position that the element would have had in a static state.
- inset-block: 120px 100px; a b
One to two values separated by a space, followed by a dimension unit (see CSS dimension units). Percentages are calculated relative to the corresponding dimension of the parent element.
These two values act along the block axis (vertically for Latin languages). If only one value is specified, it applies identically to the beginning and end of the block.
Single value
It applies to both edges (start of block and end of block).
Two values
The first applies to the edge that is the start of the block, and the second to the edge that is the end of the block.The syntax of our example is equivalent to:
inset-block-start: 120px; inset-block-end: 100px;Let us recall that if the size of the element in the
blockdirection is not specified or is set toauto, the element can be resized to satisfy the values ofinset-block. On the other hand, if the size of the element is defined, the second value ofinset-blockis ignored. - inset-inline: 120px 100px; a b
One or two values separated by a space, followed by a dimension unit (see CSS dimension units). Percentages are calculated relative to the corresponding dimension of the parent element.
These two values act along the line axis (horizontal direction for Latin languages). If only one value is specified, it applies to the edge at the start of the lines and the edge at the end of the lines.
Only one value
It applies to both edges along theinlinedirection.
Two values
They apply respectively to the edge that is the start of the lines, and to the edge that is the end of the lines.e syntax of our example is equivalent to:
inset-inline-start: 120px; inset-inline-end: 100px;The element can be resized if its dimension in the
inlinedirection is not specified or is set toauto. However, if the element's dimension is defined in theinlinedirection, the second value ofinset-inlineis ignored. - inset-inline: initial; (
auto) inset-inline: inherit; inset-inline: revert; inset-inline: revertLayer; inset-inline: unset;inset-block: initial; (auto) inset-block: inherit; inset-block: revert; inset-block: revertLayer; inset-block: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,unset.
Animation of inset-block and inset-inline properties.
Movable elements can easily be created by setting their position (here to relative) and applying an animation on the properties
inset-block and/or inset-inline.
Simulator for inset-block et inset-inline.
The blue element below is positioned absolutely (position:absolute). Its parent is positioned relatively, so it serves as a reference
for the positioning of the blue block.
On the other hand, the width and height of the element have been defined, so it is unnecessary to specify two values for inset-block and
inset-inline: only the first will be taken into account (see the explanations above regarding interactions with the dimensions of the element).
Compatibility.
Support for both properties inset-block and inset-inline is now complete.
inset-block property to specify the block-axis location of a positioned element (position is absolute, fixed, etc.).inset-inline property to set the location in the inline direction of a positioned element (position is absolute, fixed, etc.).inset-blockproperty
inset-inlineproperty
Browsers 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 properties inset-block and inset-inline.
-
CSS Logical Properties and Values Level 1
Regardinginset-block. Synthesis of logical properties such asinset-blockandinset-inline
May 18, 2017Working Draft.
-
CSS Positioned Layout Module Level 3
Regardinginset-block. Introduction ofthe inset-blockandinset-inlineproperties.February 07, 2012Working Draft.
See also, regarding the positioning of the blocks.
The CSS specifications edited by the W3C are organized into modules. The inset-block and inset-inline properties are described
in the CSS Positioned Layout Module.
Normally, CSS positions elements one after the other, ensuring that they do not overlap. This specification presents another way to position blocks, either relative to the page, relative to the screen, or relative to their normal position. The property definitions involved in this mechanism are listed below:
Properties:
top, right, bottom and left.inset-block-start and inset-block-end.inset-inline-start and inset-inline-end.