Difference between “margin-left”, and “left” (or “margin-right”, and “right”)

Question

What is the difference between margin-left: 10px; and position: relative; left: 10px;?

It seems to produce the same result

Answer 1

The simplest way I can explain it is that margin-left moves the element itself, whereas left (with position: relative) pushes other elements away. Although that's not, perhaps the clearest description.

With pictures, though:

            +---------------------------------------------------------------------------+--------------+
            |                                                                                          |
            |              +------------------------------------------------------------+              |
            |              |                                                            |              |
            |              |              +------------------------------+              |              |
            |              |              |                              |              |              |
  position  |              |              |                              |              |              |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
            |              |              |                              |              |              |
            |              |              +------------------------------+              |              |
            |              |                                                            |              |
            |              +------------------------------------------------------------+              |
            +------------------------------------------------------------------------------------------+

With position: absolute left also serves to define the distance between the element itself and the left boundary of whatever object the element is positioned against.