Is there any difference between left and margin-left?

Yes .

One is for positioning elements and the other is for establishing printing to the element.

Practical example:

#caja-position {
  width: 150px;
  height: 150px;
  background-color: red;

  position: absolute;
  top: 20px;
  left: 50px;

  margin-top: 20px; /* si funciona */
}

#caja-margen {  
  width: 50px;
  height: 50px;
  background-color: blue;

  top: 1000px; /* no funciona */
  left: 1000px; /* no funciona */

  margin-left: 50px;
  margin-top: 50px;
}

<div id="caja-position">
  <div id="caja-margen"></div>
</div>

In order for the left, right, top, bottom properties to work, the property position must be declared first, in the example you will see that the properties caja-margen and top do not work in the left .

With the margin-* | -top -right -bottom -left properties it is used to specify a space around a box and can be specified independently.

Shorthands of the property margin :

• margin: [top, right, bottom, y left] ej. margin: 10px;

• margin: [top y bottom] [left y right] ej. margin: 10px 10px;

• margin: [top] [right y left] [bottom] ej. margin: 10px 10px 10px;

• margin: [top] [right] [bottom] [left] ej. margin: 10px 10px 10px 10px;

Short answer

Yes, yes there is.

Long answer

The left property is used to position an element, that is, to indicate that the element is positioned with a value x on the left with respect to the element on which it is taking reference. This property can only be realized if the element is positioned (with position relative , absolute or fixed ).

On the other hand, the property margin-left does not take into account the positioning reference of the object if not the margin that we are going to establish the element. That is, it will not position the element with respect to another, but instead it will place a left (or right) margin regardless of where it is positioned.

If you have doubts about what each type of positioning does, you can see the answer I gave in this other question: What is the difference between position: relative, position: absolute and position: fixed?

• Left, bottom, top or right: they are used for positioning. Link
• Margin left: Sets the width of the left margin of the elements. Link
• Margin right: Sets the width of the right margin of the elements. Link

  

The difference between CSS and CSS3 is that CSS3 is an update that adds more quantities of attributes to a language such as CSS.