inset-inline-start

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since abril de 2021.

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

Learn more
See full compatibility

Experimental: Esta es una tecnologa experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en produccin.

La propiedad de CSS inset-inline-start define la insercin de inicio en lnea lgica de un elemento, que se asigna a un desplazamiento fsico en funcin del modo de escritura, la direccionalidad y la orientacin 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>

Esta sintaxis refleja el estndar ms reciente segn CSS Positioned Layout Module Level 3, CSS Values and Units Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener informacin de soporte.

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;
}