Atributo CSS inset-inline

Definição e uso

inset-inline configuração do atributo para definir a distância do elemento na direção da linha em relação ao elemento pai.

Atenção:Para que este atributo funcione, é necessário especificar position atributo

inset-inline O atributo é uma abreviação dos seguintes atributos:

• inset-inline-start
• inset-inline-end

inset-inline Os valores do atributo podem ser configurados de diferentes maneiras:

Se o atributo inset-inline tiver dois valores:

inset-inline: 10px 50px;

• A distância do extremo inicial é de 10px
• A distância do extremo final é de 50px

Se a propriedade 'inset-inline' tiver um valor:

inset-inline: 10px;

• A distância do início e do fim é de 10px

CSS do inset-inline e inset-block propriedades são semelhantes às do CSS top,bottom,left e right 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 e direction Define a direção da linha. Isso afeta a posição de início e fim da linha, bem como inset-inline O resultado da propriedade. Para páginas em inglês, a direção da linha é de esquerda para direita e a direção do bloco é para baixo.

Exemplo

Exemplo 1

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

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

Experimente você mesmo

Exemplo 2

Quando o valor da propriedade writing-mode Quando o valor da propriedade 'writing-mode' é 'vertical-rl', a direção da linha é para baixo. O resultado é que o início do elemento se move da esquerda para o topo e o fim do elemento se move da direita para o fundo:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 3

Quando o valor da propriedade direction Quando o valor da propriedade 'direction' é 'rtl', a direção da linha é de direita para esquerda. O resultado é que o início do elemento se move da esquerda para a direita e o fim do elemento se move da direita para a esquerda:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Experimente você mesmo

Sintaxe do CSS

inset-inline: 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:Atributo direction do CSS

Referência:A propriedade CSS writing-mode