Atributo CSS inset-block

Página anterior inset
Página siguiente inset-block-end

Definición y uso

inset-block El elemento de configuración de atributos está a una distancia del elemento padre en la dirección del bloque.

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

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

inset-block-start
inset-block-end

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

Si el atributo inset-block tiene dos valores:

inset-block: 10px 50px;

La distancia de inicio es de 10px
La distancia final es de 50px

Si el atributo inset-block tiene un valor:

inset-block: 10px;

La distancia de inicio y finalización son de 10px

CSS de inset-block y inset-inline Los atributos y los 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 la dirección de línea.

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

Ejemplo

Ejemplo 1

Configurar la distancia del elemento <div> posicionado en la dirección del bloque con respecto al elemento padre:

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

Intente hacerlo usted mismo

Ejemplo 2

Cuando el elemento <div> tiene writing-mode Cuando el valor del atributo writing-mode es vertical-rl, la posición de inicio del elemento se mueve desde la parte superior a la derecha y la posición de finalización se mueve desde la parte inferior a la izquierda:

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

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Valor predeterminado de inset-block del elemento.
longitud	Especifique la distancia en unidades como px, pt, cm, etc. Se permiten valores negativos. Consulte:Unidades CSS.
%	Especifique la distancia en porcentaje de la anchura del elemento padre en el eje correspondiente.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Creación de animaciones:	Compatibilidad. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.insetBlock="100px 50px"