What is the difference between margin-left: 10px;
and position: relative; left: 10px;
?
It seems to produce the same result
Left is the position of your entire element, margin-left is the amount of your left margin.
Defines the space outside the element, on the left side. default margin-left: 0; Removes any margin on the left.
The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of margin-right property is zero.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With