Propriedade CSS inset-block

Página anterior inset
Próxima página inset-block-end

Definição e uso

inset-block O elemento de configuração de atributo está distante do elemento pai na direção do bloco.

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

inset-block A propriedade é uma abreviação das seguintes propriedades:

inset-block-start
inset-block-end

inset-block Os valores da propriedade podem ser configurados de diferentes maneiras:

Se a propriedade inset-block tiver dois valores:

inset-block: 10px 50px;

A distância inicial é de 10px
A distância final é de 50px

Se a propriedade inset-block tiver um valor:

inset-block: 10px;

A distância inicial e final são ambas de 10px

O CSS inset-block e inset-inline propriedades são equivalentes às do CSS superior,inferior,esquerda e direita A propriedade é muito semelhante, 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 inicial e final do bloco, bem como inset-block O resultado da propriedade. Para páginas em inglês, a direção do bloco é para baixo e a direção da linha é da esquerda para a direita.

Exemplo

Exemplo 1

Defina a distância do elemento <div> posicionado já definido na direção do bloco em relação ao elemento pai:

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

Experimente você mesmo

Exemplo 2

Quando o elemento <div> writing-mode Quando a propriedade de writing-mode é definida como vertical-rl, a posição inicial do elemento move-se para a direita e a posição final move-se para a esquerda:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Valor padrão. Valor padrão de inset-block do elemento.
length	Especifique a distância com unidades como px, pt, cm, etc. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique a distância percentual em relação ao tamanho do elemento pai no eixo correspondente.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	auto
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.insetBlock="100px 50px"