inset-block-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-block-start define el desplazamiento de inicio de bloque lógico 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-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* Keyword value */ inset-block-start: auto; /* Global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset;

Valor inicial	`auto`
Applies to	positioned elements
Heredable	no
Percentages	logical-height 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-block-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-block-start: 20px; background-color: #c8c800; }