Atributo CSS inset-block-end

Definición y uso

inset-block-end propiedad que establece la distancia del extremo del elemento en la dirección del bloque con respecto al elemento padre.

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

CSS inset-inline y inset-block propiedades son similares a 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 la línea.

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-end El resultado del atributo. Para las páginas en inglés, la dirección del bloque es hacia abajo y la dirección de la línea es de izquierda a derecha.

Ejemplo

Ejemplo 1

Establezca la distancia del extremo del elemento <div> ubicado en la dirección del bloque con respecto al elemento padre:

div {
  inset-block-end: 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 del elemento se mueve desde la parte inferior a la izquierda:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

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

Páginas relacionadas

Tutoriales:Posicionamiento CSS

Referencia:Atributo CSS position

Referencia:Atributo writing-mode de CSS