Difference between position and margin [duplicate]

Question

What's the difference between

position : relative;
bottom : 10px;

And :

margin-top: -10px;

In my opinion they are the same isn't ?

Answer 1

No; if you give something position: relative and pull it up 10 pixels, it will move, but continue to occupy (in terms of its box) the 10 pixels below it that it previously occupied.

If you give something margin and pull it up 10 pixels, it moves up and brings everything underneath it with it, too.

Fiddle: http://jsfiddle.net/2cY8F

Answer 2

When you are using position:relative then it positions the element at it's normal location in the document flow, and then subsequently moves it to the offset position. The space it originally occupies is reserved in the layout (left empty).

FIDDLE DEMO for position: relative

Margins however is not positioning properties, infact it is a part of box model used to create block boxes on the page. It is the space that exists between the border edge of an element to that of next adjacent element.

FIDDLE DEMO for margin

Also check Negative margins vs relative positioning

Answer 3

Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter.

The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).

In your first case you have a relatively positioned element. For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position.

Your second case consists entirely of setting the margin-top which changes the "bounding box" of the element.

Answer 4

If you use position, the element appears 10px from the top. If you use margin, the element will sort of 'push' itself from the top, adding space around it.

I will add an image to explain

The grey-black box shows your div. The first half of the picture shows position, the second shows margin, where the yellow part is the margin.