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 ⁨abril de 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;
}

[フレーム]