Atributo CSS inset-block-start

Recomendaciones de cursos:

inset-block-start Definición y uso

Nota:propiedades para establecer la distancia entre el extremo inicial del elemento en la dirección del bloque y el elemento padre. Para que este atributo funcione, debe especificar position

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

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

Ejemplo

Ejemplo 1

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

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

Pruebe usted mismo

Ejemplo 2

Cuando el elemento <div> tiene writing-mode Cuando el valor del atributo se establece en vertical-rl, la dirección del bloque es de derecha a izquierda. El resultado es que el extremo inicial del elemento se mueve hacia la derecha:

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

Pruebe usted mismo

Sintaxis de CSS

inset-block-start: auto|length|initial|inherit;

Valor del atributo

Valor Descripción
auto Valor predeterminado. Utiliza la distancia inset predeterminada del elemento.
length

Especifique la distancia utilizando unidades fijas (como px, pt, cm, etc.). Se permiten valores negativos.

Consulte:Unidades CSS.
% Especifique la distancia utilizando porcentajes, en relación con el tamaño del elemento padre en el eje correspondiente.
initial Establezca esta propiedad en su valor predeterminado. Vea: initial.
inherit Hereda esta propiedad de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.insetBlockStart="100px"

Compatibilidad del navegador

Las cifras en la tabla representan la versión del navegador que admite completamente esta propiedad.

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 writing-mode de CSS