CSS propriedade margin-inline

Página anterior margin-bottom
Próxima página margin-inline-end

Definição e uso

margin-inline A propriedade especifica a margem externa no início e no final da direção da linha, é uma abreviação das seguintes propriedades:

margin-inline Os valores da propriedade podem ser configurados de diferentes maneiras:

Se a propriedade margin-inline tiver dois valores:

margin-inline: 10px 50px;

A margem externa no início é de 10px
A margem externa ao final é de 50px

Se a propriedade margin-inline tiver um valor:

margin-inline: 10px;

As margens de início e fim são 10px

CSS margin-inline e margin-block As propriedades são semelhantes às margin-top、margin-bottom、margin-left e margin-right As propriedades são muito semelhantes, mas margin-inline e margin-block A propriedade depende da direção do bloco e da direção alinhada.

Notas:Propriedades CSS relacionadas writing-mode e direction Define a direção alinhada. Isso afeta a posição inicial e final do elemento, bem como o resultado da propriedade margin-inline-end. Para páginas em inglês, a direção do bloco é para baixo e a direção alinhada é de esquerda para direita.

Exemplo

Exemplo 1

Defina a margem externa nas laterais da direção da linha:

div {
  margin-inline: 35px;
}

Experimente você mesmo

Exemplo 2

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

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 3

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

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Experimente você mesmo

Sintaxe do CSS

margin-inline: auto|length|initial|inherit;

Valor da propriedade

Valor	Descrição
auto	Valor padrão. O valor padrão de margin-inline do elemento.
length	Especifique margin-inline com unidades como px, pt, cm. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique o percentual do tamanho do elemento pai na direção de linha para margin-inline.
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:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.marginInline="50px 10px"