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**

[image](https://github.com/YrllanBrandao/form-submitter/assets/77467410/80864062-dd48-4569-8843-9e09997ae976)


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 `div`esteja na segunda parte dos `100px` algo como: [-----[--div--]] e vocÊ coloque o elemento `i`como `left:0`, o resultado é o elemento `i`colocado 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!

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 cham...