Margin-inline - CSS-Tricks | CSS Almanac 2025

margin-inlineé uma propriedade abreviada em CSS que define os valores margin-inline-starte de um elemento, sendo margin-inline-endque ambos são propriedades lógicas. Ele cria espaço em torno do elemento na direção em linha, que é determinada pelo elemento de writing-mode, directione text-orientation.

A propriedade faz parte da especificação CSS Logical Properties and Values Level 1 que está atualmente no status Draft do editor. Isso significa que a definição e as informações sobre ele podem mudar entre agora e a recomendação oficial.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Se o writing-modefor definido como horizontal-lr, a margin-inlinepropriedade funcionará exatamente como definir margin-lefte margin-right. Um aspecto interessante dessa propriedade é que ela é uma das propriedades lógicas que não tem um mapa um-para-um com uma propriedade não lógica. Não há nenhuma propriedade mais antiga que defina ambas (e apenas) as margens de direção em linha.

Mas mude o elemento writing-modepara algo como vertical-lre as bordas “inline” são giradas na direção vertical, agindo mais como as propriedades margin-tope margin-bottom.

Sintaxe

margin-inline: (1,2)

É 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 que margin-top(até duas vezes), que segue 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

Se você estiver familiarizado com a marginpropriedade abreviada, então margin-inlinese sentirá muito familiarizado. A única diferença é que ele funciona em duas direções em vez de quatro.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;