Atributo CSS inset-block-start

Definição e uso

inset-block-start definir a distância do extremo inicial do elemento no eixo do bloco em relação ao elemento pai.

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

do CSS inset-inline e propriedades inset-block propriedades são semelhantes às propriedades do CSS superior,inferior,esquerda e direita São muito semelhantes, mas propriedades 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-start 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 extremo inicial do elemento <div> definido na direção do bloco em relação ao elemento pai:

div {
  inset-block-start: 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 o extremo inicial do elemento se move para a direita:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
auto Valor padrão. Usa o valor padrão de inset do elemento.
length

Use unidade fixa (como px, pt, cm, etc.) para especificar a distância. Permite valores negativos.

Veja:Unidades CSS.

% Use porcentagem para especificar a distância, em relação ao tamanho do elemento pai na correspondente dimensão do eixo.
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: Suporte. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.insetBlockStart="100px"

Suporte do navegador

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

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Páginas relacionadas

Tutorial:Posicionamento CSS

Referência:Propriedade CSS position

Referência:Propriedade writing-mode do CSS