Atributo CSS inset-block-start
- Página anterior inset-block-end
- Próxima página inset-inline
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; }
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; }
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
- Página anterior inset-block-end
- Próxima página inset-inline