What is the difference between
margin-left: 10px;
and position: relative; left: 10px;
?
It seems to produce the same result
See Question&Answers more detail:osWhat is the difference between
margin-left: 10px;
and position: relative; left: 10px;
?
It seems to produce the same result
See Question&Answers more detail:osThe 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.