CSS propriedade margin-inline-end

Página anterior margin-inline
Próxima página margin-inline-start

Definição e uso

margin-inline-end propriedade especifica a margem do extremo da direção inline.

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

Nota:propriedades CSS relacionadas writing-mode e direction Define a direção inline. Isso afeta a posição de início e fim do elemento, bem como margin-inline-end O resultado da propriedade. Para páginas em inglês, a direção do bloco é para baixo e a direção inline é de esquerda para direita.

Exemplo

Exemplo 1

Defina a margem do extremo da direção inline:

div {
  margin-inline-end: 35px;
}

Experimente você mesmo

Exemplo 2

Quando o atributo writing-mode Quando o valor do atributo é 'vertical-rl', a direção inline é para baixo. O resultado é que o extremo do elemento se move da direita para o fundo:

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

Experimente você mesmo

Exemplo 3

Quando o atributo direction Quando o valor do atributo é 'rtl', a direção inline é de direita para esquerda. O resultado é que o extremo do elemento se move da direita para a esquerda:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Valor padrão. O valor padrão de margin-inline-end do elemento.
length	Especifique margin-inline-end em unidades como px, pt, cm. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique margin-inline-end como uma porcentagem da largura do elemento pai na direção 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:	Suporte. Veja:Atributos relacionados a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.marginInlineEnd="50px"