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 valueauto
Applies topositioned elements
Inheritedno
Percentageslogical-width of containing block
Computed valuesame as box offsets: top, right, bottom, left properties except that directions are logical
Animation typea 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; } 
Result

Specifications

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Windows
Random CSS Property

<length>

The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
length#em css reference