Atributo CSS inset-inline-start

Página anterior inset-inline-end
Página siguiente isolation

Definición y uso

inset-inline-start propiedad que establece la distancia entre el extremo inicial del elemento en la dirección de la línea y el elemento padre.

Nota:Para que este atributo funcione, debe especificar position propiedades.

CSS inset-inline y inset-block Las propiedades son similares a las de CSS top,bottom,left y right Las propiedades son muy similares, pero inset-block y inset-inline El atributo depende de la dirección del bloque y la dirección de la línea.

Nota:propiedades CSS relacionadas writing-mode y direction Define la dirección de la línea. Esto afecta la posición inicial del elemento en la dirección de la línea y inset-inline-start El resultado del atributo. Para las páginas en inglés, la dirección de la línea es de izquierda a derecha, y la dirección del bloque es hacia abajo.

Ejemplo

Ejemplo 1

Establezca la distancia entre el extremo inicial del elemento <div> ubicado y el elemento padre en la dirección de la línea:

div {
  inset-inline-start: 50px;
}

Pruebe usted mismo

Ejemplo 2

Cuando el atributo <div> writing-mode Cuando el valor del atributo se establece en vertical-rl, la dirección de la línea es hacia abajo. El resultado es que el extremo inicial del elemento se mueve desde la izquierda hacia la parte superior:

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

Pruebe usted mismo

Ejemplo 3

Cuando el atributo <div> direction Cuando el valor del atributo se establece en rtl, la dirección de la línea es de derecha a izquierda. La descripción aquí tiene un pequeño error de escritura, debería ser: "El extremo inicial del elemento sigue siendo en la derecha (porque para rtl, el extremo inicial es la derecha, solo que en comparación con el diseño de línea predeterminado ltr, todo el contenido se invierte)".

div {
  inset-inline-start: 50px;
  direction: rtl;
}

Pruebe usted mismo

Sintaxis de CSS

inset-inline-start: auto|longitud|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Distancia de嵌入式默认 del elemento.
longitud	Especifique la distancia en unidades como px, pt, cm, etc. Se permiten valores negativos. Vea:Unidades CSS.
%	Especifique la distancia en porcentaje de la anchura o altura del elemento padre en el eje correspondiente.
initial	Establezca este atributo en su valor predeterminado. Vea: initial.
inherit	Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Soportado. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.insetInlineStart="30%"