Propriedade CSS margin-right
Use esta propriedade para definir o espaço de margem no lado direito de um elemento. Veja os valores e exemplos da propriedade.
A propriedade CSS margin-right define a largura da área de margem no lado direito de um elemento — o espaço transparente entre a borda direita do elemento e o conteúdo vizinho ou o bloco que o contém.
É uma das quatro propriedades de margem individuais — junto com margin-top, margin-bottom e margin-left — que a propriedade abreviada margin define todas de uma vez. Use margin-right quando quiser ajustar apenas o espaço à direita, como separar um ícone inline do texto ao lado, ou afastar um elemento flutuante do conteúdo adjacente.
Esta página abrange a sintaxe da propriedade, todos os valores aceitos (incluindo auto, % e comprimentos negativos), além das regras que você deve conhecer antes de utilizá-la.
Valores negativos são permitidos. Um margin-right negativo aproxima o conteúdo seguinte (ou o sobrepõe), o que pode ser útil ocasionalmente para efeitos de sobreposição, mas pode causar surpresas no layout.
| Valor Inicial | 0 |
|---|---|
| Aplicável a | Todos os elementos. Aplica-se também a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A margem direita do elemento é animável. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.marginRight = "50px"; |
Sintaxe
margin-right: length | auto | initial | inherit;Exemplos
Um comprimento fixo em pixels
O caso mais simples: reservar uma quantidade fixa de espaço à direita. Aqui o parágrafo mantém uma margem de 400px no lado direito, portanto não se estende até a largura total do contêiner.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 400px;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Um valor em porcentagem
Quando o valor é uma porcentagem, ele é calculado em relação à largura do bloco contentor — não à largura do próprio elemento. Assim, margin-right: 50% deixa um espaço igual à metade da largura do conteúdo do pai.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 50%;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>O valor auto
Para um elemento de nível de bloco, margin-right: auto permite que o navegador preencha o espaço disponível à direita. Por si só tem pouco efeito visível, mas combinado com margin-left: auto é o truque clássico para centralizar horizontalmente um bloco de largura fixa. Definir apenas margin-right: auto (com margin-left: 0) empurra o bloco para a borda esquerda.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: auto;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Define a margem direita. É o valor padrão desta propriedade. | Experimente » |
| length | Define uma margem direita em px, pt, cm, etc. O valor padrão é 0. | Experimente » |
| % | Define a margem direita em % do elemento contentor. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
O que ter em mente
- Margens são transparentes. Ao contrário do padding, a margem fica fora da borda e nunca exibe a cor de fundo do elemento.
- Margens direitas não colapsam. O colapso de margens ocorre apenas entre margens verticais adjacentes (
margin-top/margin-bottom). Margens horizontais comomargin-rightsempre se somam. - Porcentagens referenciam a largura. Um valor em
%é resolvido em relação à largura do bloco contentor, mesmo que controle o espaço horizontal. - Alternativa abreviada. Se você definir mais de um lado de uma vez, a propriedade abreviada
marginé mais curta:margin: 0 400px 0 0equivale amargin-right: 400pxcom zeros nos demais lados.