CSS: Top vs Margin-top

Não tenho certeza se entendi totalmente a diferença entre esses dois.

Alguém pode explicar por que eu usaria um em vez do outro e como eles diferem?

topé para ajustar um elemento com o uso de positionpropriedade.
margin-topserve para medir a distância externa ao elemento, em relação ao anterior.

Além disso, o topcomportamento pode ser diferente dependendo do tipo de posição absolute, relativeou fixed.

Você usaria margem, se quisesse mover um elemento (bloco) para longe de outros elementos no fluxo do documento. Isso significa que empurraria os seguintes elementos para longe / mais para baixo. Esteja ciente de que as margens verticais dos elementos de bloco adjacentes entram em colapso.

Se você queria o elemento não ter efeito sobre os elementos circundantes, você pode usar o posicionamento (abs., Rel.) E a top, bottom, lefteright configurações.

Com o relativeposicionamento, o elemento ainda ocupará seu espaço original como quando posicionado estaticamente. É por isso que nada acontece, se você acabou de mudar staticda relativeposição. A partir daí, você pode empurrá-lo através dos elementos ao redor.

Com o absoluteposicionamento, você remove completamente o elemento do fluxo de documento (estático), para que ele libere o espaço que ocupava. Você pode então posicioná-lo livremente - mas em relação ao próximo melhor elemento não estaticamente posicionado enrolado nele. Se não houver nenhum, ele será ancorado em toda a página.

Margin aplica e estende / contrai o limite normal do elemento, mas quando você chama top, você está ignorando a posição regular do elemento e flutuando-o para uma posição específica.

Exemplo:

html:

<div id="some_element">content</div>

css:

#some_element {margin-top: 50%}

Significa que o elemento começará a exibir html na altura de 50% de seu contêiner (ou seja, o div exibindo a palavra "conteúdo" seria exibido a 50% da altura de seu div ou nó html diretamente antes de div # some_element), mas se você abrir seu inspetor do navegador (f12 no Windows ou cmd + alt + i no mac) e mouse sobre o elemento, você verá seus limites destacados e perceber que o elemento foi empurrado para baixo em vez de reposicionado.

Top por outro lado:

#some_element {top: 50%}

Na verdade, reposicionará o elemento, o que significa que ele ainda será exibido em 50% de seu contêiner, mas reposicionará o elemento de forma que sua borda comece em 50% do elemento que o contém. Em outras palavras, haverá uma lacuna entre as bordas do elemento e seu contêiner.

Felicidades!

A toppropriedade é uma propriedade de posição. É usado com a positionpropriedade, como absoluteou relative. margin-topé a propriedade de um elemento.

de bytes:

"Margem é o espaço entre a borda da caixa de um elemento e a borda da caixa completa, como a margem de uma letra. 'Superior' desloca a borda da margem do elemento da caixa de blocos que contém, como aquele mesmo pedaço de papel dentro uma caixa de papelão, mas não contra a borda do recipiente. "

Meu entendimento é que margin-top cria uma margem no elemento e top define a borda superior do elemento abaixo da borda superior do elemento que contém no deslocamento.

você pode tentar aqui:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

apenas substitua top por margin-top para ver a diferença.