Propriedade Style marginTop

Definição e uso

marginTop configura ou retorna a margem superior externa do elemento.

Propriedade margin e Propriedade padding Insere espaço ao redor do elemento. No entanto, a diferença está em que a margem insere espaço ao redor da borda, enquanto o preenchimento insere espaço dentro da borda do elemento.

Veja também:

Tutorial do CSS:Margem externa CSS

Manual do CSS:Propriedade margin-top

Manual do HTML DOM:Propriedade margin

Exemplo

Exemplo 1

Defina a margem superior externa do elemento <div>:

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

Experimente você mesmo

Exemplo 2

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

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

Experimente você mesmo

Exemplo 3

Retorna a margem superior externa do elemento <div>:

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

Experimente você mesmo

Exemplo 4

Diferença entre marginTop e paddingTop:

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

Experimente você mesmo

Sintaxe

Retorne a propriedade marginTop:

object.style.marginTop

Defina a propriedade marginTop:

object.style.marginTop = "%|length|auto|initial|inherit"

Valor da propriedade

Valor Descrição
% Defina a margem superior externa usando uma porcentagem da largura do elemento pai.
length Defina a margem superior externa usando uma unidade de comprimento.
auto Configurações do navegador para a margem superior externa.
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: 0
Retorno: Cadeia de caracteres, que representa a margem superior 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