Propriedade CSS margin-left
A propriedade CSS margin-left define o espaço de margem no lado esquerdo de um elemento. Saiba mais sobre seus valores e veja exemplos.
A propriedade margin-left define a largura da margem esquerda.
Quando a soma de width, margin-left, border, padding, a área de conteúdo e margin-right excede a largura do contêiner, as margens se tornam auto.
A propriedade margin-left é definida como a palavra-chave <auto>, <percentage> ou um <length>. Seu valor pode ser negativo, positivo ou zero.
Informação
Valores negativos são permitidos.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Sim. A margem esquerda do elemento é animável. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.marginLeft = "20px"; |
Sintaxe
Sintaxe da propriedade CSS margin-left
margin-left: auto | <length> | <percentage> | initial | inherit;Exemplo da propriedade margin-left definida como "px":
Exemplo da propriedade CSS margin-left com valor em px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 25px;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Exemplo da propriedade margin-left definida como "em":
Exemplo da propriedade CSS margin-left com valor em em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 8em;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemplo da propriedade margin-left definida como "px", "em" e "%":
Exemplo da propriedade CSS margin-left com valores em, px e %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-left: 6em;
}
p.p2 {
margin-left: 40px;
}
p.p3 {
margin-left: 10%;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>No specified margin.</p>
<p class="p1"> Left margin is set to 6em.</p>
<p class="p2">Left margin is set to 40px.</p>
<p class="p3">Left margin is set to 10%.</p>
<p>No specified margin</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Define a margem esquerda. É o valor padrão desta propriedade. | Experimente » |
| length | Define uma margem esquerda em px, pt, cm, etc. O valor padrão é 0. | Experimente » |
| % | Define a margem esquerda em % do elemento contêiner. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Prática
Prática
O que a propriedade 'margin-left' especifica em CSS?
Was this page helpful?