Atributo CSS inset-block-end

Definição e uso

inset-block-end propriedade que define a distância do final do elemento na direção do bloco em relação ao elemento pai.

Atenção:Para que essa propriedade funcione, é necessário especificar position propriedade.

CSS inset-inline e inset-block propriedades são semelhantes às propriedades do CSS top,bottom,left e right propriedades são muito semelhantes, mas inset-block e inset-inline A propriedade depende da direção do bloco e da direção da linha.

Atenção:propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição de início e fim do bloco, bem como inset-block-end O resultado da propriedade. Para páginas em inglês, a direção do bloco é para baixo e a direção da linha é de esquerda para direita.

Exemplo

Exemplo 1

Defina a distância do elemento <div> posicionado no final da direção do bloco em relação ao elemento pai:

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

Experimente você mesmo

Exemplo 2

Quando o elemento <div> writing-mode Quando a propriedade 'vertical-rl' é definida, a direção do bloco é de direita para esquerda. O resultado é que a extremidade do elemento se move do lado esquerdo para o lado inferior:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Páginas relacionadas

Tutorial:Posicionamento CSS

Referência:A propriedade CSS position

Referência:A propriedade CSS writing-mode