Propriedade marginLeft

Definição e uso

marginLeft define ou retorna a margem esquerda do elemento.

Propriedade margin e Propriedade padding Ambos inserem espaço ao redor do elemento, mas a diferença está em que margin insere espaço ao redor da borda, enquanto padding insere espaço dentro da borda do elemento.

Veja também:

Tutorial do CSS:Margem externa do CSS

Manual do CSS:Propriedade margin-left

Manual do HTML DOM:Propriedade margin

Exemplo 1

Defina a margem esquerda do elemento <div>:

document.getElementById("myDiv").style.marginLeft = "50px";

Experimente você mesmo

Exemplo 2

Volte a margem esquerda do elemento <div> para "normal":

document.getElementById("myDiv").style.marginLeft = "0px";

Experimente você mesmo

Exemplo 3

Retorna a margem esquerda do elemento <div>:

alert(document.getElementById("myDiv").style.marginLeft);

Experimente você mesmo

Exemplo 4

Diferença entre marginLeft e paddingLeft:

function changeMargin() {
  document.getElementById("myDiv").style.marginLeft = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingLeft = "100px";
}

Experimente você mesmo

Sintaxe

Retorne a propriedade marginLeft:

object.style.marginLeft

Defina a propriedade marginLeft:

object.style.marginLeft = "%|length|auto|inherit"

Valor da propriedade

Valor Descrição
% Defina a margem esquerda usando uma porcentagem da largura do elemento pai.
length Defina a margem esquerda usando uma unidade de comprimento.
auto Configuração do navegador para a margem esquerda.
initial Defina essa propriedade como seu valor padrão. Veja também initial.
inherit Herda essa propriedade do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: 0
Retorno: Cadeia de caracteres, que representa a margem esquerda externa do elemento.
Versão do CSS： CSS1

Navegador suporta

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte