Atributo CSS inset-inline-end

Página anterior inset-inline
Página siguiente inset-inline-start

Recomendaciones de cursos:

inset-inline-end Definición y uso

Nota:propiedad que establece la distancia entre el extremo final del elemento en la dirección de la línea y el elemento padre. Para que este atributo funcione, debe especificar position

CSS inset-inline y inset-block propiedades y las propiedades de CSS top,bottom,left y right El atributo es muy similar, pero inset-block y inset-inline El atributo depende de la dirección del bloque y 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 del extremo del elemento en la dirección de la línea y inset-inline-end 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

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

div {
  inset-inline-end: 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 del elemento se mueve desde la derecha hacia abajo:

div {
  inset-inline-end: 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. El resultado es que el extremo del elemento se mueve desde la derecha a la izquierda:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Distancia de inserción predeterminada del elemento.
longitud	Especifique la distancia en unidades como px, pt, cm, etc. Se permiten valores negativos. Ver:Unidades CSS.
%	Especifica una distancia en porcentaje de la dimensión correspondiente del elemento padre en el eje correspondiente.
initial	Establece este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

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