inset-inline-end

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

* Some parts of this feature may have varying levels of support.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS inset-inline-end define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad top, right, bottom, o left dependiendo de la propiedad en los valores definidos para modo de escritura, dirección y orientación de texto.

css

/* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* Keyword value */ inset-inline-end: auto; /* Global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset;

Valor inicial	`auto`
Applies to	positioned elements
Heredable	no
Percentages	logical-width of containing block
Valor calculado	same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
Animation type	a length, percentage or calc();

inset-inline-end = 
 auto |
 <length-percentage> 

<length-percentage> = 
 <length> |
 <percentage>

Ejemplo

Contenido HTML

html

<div> <p class="exampleText">Example text</p> </div>

Contenido CSS

css

div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; }