Atributo CSS inset-inline

Definición y uso

inset-inline Establecer la distancia del elemento en la dirección de la línea con su elemento padre.

Nota:Para que este atributo funcione, debe especificarse position Atributo.

inset-inline El atributo es una abreviatura de los siguientes atributos:

inset-inline El valor del atributo se puede configurar de diferentes maneras:

Si el atributo inset-inline tiene dos valores:

inset-inline: 10px 50px;
  • La distancia del extremo inicial es de 10px
  • La distancia del extremo final es de 50px

Si el atributo inset-inline tiene un valor:

inset-inline: 10px;
  • La distancia desde el extremo de inicio y el extremo de finalización es de 10px

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 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 de inicio y finalización de la línea, así como inset-inline 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 elemento <div> ubicado y el elemento padre en la dirección de la línea:

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

Pruebe usted mismo

Ejemplo 2

Cuando el atributo 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 de inicio del elemento se mueve desde la izquierda a la parte superior, y el extremo de finalización desde la derecha a la parte inferior:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Pruebe usted mismo

Ejemplo 3

Cuando el atributo 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 de inicio del elemento se mueve desde la izquierda a la derecha, y el extremo de finalización desde la derecha a la izquierda:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
auto Valor predeterminado. La distancia predeterminada de inset-inline del elemento.
longitud Especifique la distancia con unidades como px, pt, cm, etc. Se permiten valores negativos. Vea:Unidades CSS.
% Especifique la distancia en porcentaje de la longitud de la dirección correspondiente al elemento padre.
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: Admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.insetInline="100px 50px"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente esta propiedad por primera vez.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Páginas relacionadas

Tutoriales:Posicionamiento CSS

Referencia:Atributo CSS position

Referencia:Atributo CSS direction

Referencia:Atributo writing-mode de CSS