inset-inline-start

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-start define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico 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 writing-mode, direction, y text-orientation.

css

/* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* Keyword value */ inset-inline-start: auto; /* Global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: 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-start = 
 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-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; }