Margin-inline-start - CSS-Tricks

A margin-inline-startpropriedade em CSS define a quantidade de espaço ao longo da borda inicial externa de um elemento na direção inline. Ele está incluído na especificação CSS Logical Properties Nível 1, que está atualmente no Working Draft.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

A borda inicial na direção inline é determinada pelo elemento writing-mode, directione text-orientation. Portanto, ao usar margin-inline-startem um contexto horizontal da esquerda para a direita, ele atua margin-leftcomo se a borda inicial do elemento fosse o lado esquerdo.

Mas se mudarmos writing-modepara, digamos, vertical, o elemento é girado no sentido horário, colocando a borda inicial em direção ao topo. Como resultado, margin-inline-startse comporta exatamente como margin-top. Basicamente, a borda inicial é relativa à direção em que flui. Isso é o que queremos dizer quando falamos sobre propriedades “lógicas”.

Sintaxe

margin-inline-start:

É meio estranho ver a sintaxe de uma propriedade referindo-se à sintaxe de outra propriedade CSS diretamente na documentação, mas é isso mesmo. O que basicamente está tentando dizer é que a propriedade aceita os mesmos valores margin-topque seguem esta sintaxe:

margin-top: | | auto;

Valor inicial: 0
Aplica-se a: todos os elementos, exceto elementos de mesa internos, recipientes de base de rubi e recipientes de anotação de rubi
Herdado: não
Porcentagens: quanto à propriedade física correspondente
Valor calculado: igual às margin-*propriedades correspondentes
Tipo de animação: por tipo de valor calculado

Valores

margin-block-start aceita um único comprimento ou valor de palavra-chave.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;