Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between "margin-left", and "left" (or "margin-right", and "right")

Tags:

css

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

It seems to produce the same result

like image 840
Joel Avatar asked Oct 04 '10 23:10

Joel


People also ask

What's the difference between margin-left and left?

Left is the position of your entire element, margin-left is the amount of your left margin.

What is a left margin?

Defines the space outside the element, on the left side. default margin-left: 0; Removes any margin on the left.

What is the use of margin-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.

What is right margin?

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.


1 Answers

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.

like image 159
David Thomas Avatar answered Sep 28 '22 18:09

David Thomas