Vamos lá, o margin cria um espaçamento externo do elemento conforme a imagem a seguir, onde border ou borda se refere ao limite do elemento, o espaçamento que ultrapassa isso é o que chamamos de margin
já utilizar left, right, top ou bottom posiciona seu elemento em relação ao elemento PAI, vejamos um exemplo:
<div>
<i></i>
</div>
O elemento div é o pai do elemento i, portanto se você colocar left:0 no elemento i ele irá ficar a esquerda da div
porém se a div também tiver um pai, o que acontece?
<body>
<div>
<i></i>
</div>
</body>
Suponhamos que o elemento body tenha 100px de largura e a div tenha 50px e a divesteja na segunda parte dos 100px algo como: [-----[--div--]] e vocÊ coloque o elemento icomo left:0, o resultado é o elemento icolocado na esquerda da segunda parte, justamento no início do elemento div, algo como [-----[i-DIV--]], porém se você utilizar a proriedade css position e setar como fixed, então aí sim o elemento irá se posicionar de acordo com a tela, pois ele irá ignorar o elemento pai.
Estou com um pouco de sono, não sei se deu pra entender,mas espero ter ajudado!