inset-inline
Quick Summary for inset-inline
The
inset-inline
CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top
and bottom
, or right
and left
properties depending on the values defined for writing-mode
, direction
, and text-orientation
.
Code Usage for inset-inline
/* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* Keyword value */ inset-inline: auto; /* Global values */ inset-inline: inherit; inset-inline: initial; inset-inline: revert; inset-inline: unset;
More Details for inset-inline
inset-inline
The inset-inline
CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top
and bottom
, or right
and left
properties depending on the values defined for writing-mode
, direction
, and text-orientation
.
/* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* Keyword value */ inset-inline: auto; /* Global values */ inset-inline: inherit; inset-inline: initial; inset-inline: revert; inset-inline: unset;
Constituent properties
This property is a shorthand for the following CSS properties:
inset-inline-end
inset-inline-start
Syntax
Values
The inset-inline
property takes the same values as the left
property.
Formal definition
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | logical-width 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,2}
Examples
Setting inline start and end offsets
HTML<div> <p class="exampleText">Example text</p> </div>
CSS div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; }
ResultSpecifications
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-inset-inline |
See also
The mapped physical properties:top
, right
, bottom
, and left
The mapped physical shortcut: inset
The mapped block shortcut: inset-block
writing-mode
, direction
, text-orientation
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語 Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline