Why not use margin positioning instead of using position:relative top 5px?

Question

Title, basically. I've been doing a lot of my work using margin positioning instead of stuff like position: relative, just because I wasn't aware you could control it that way.

What is margin supposed to do, and why am I supposed to use position when margin gets the job done?

Answer 1

In a nutshell, margins add space around an element's box and modifies the amount of space reserved for it in the page flow to match. So a top margin moves a block down, while also moving all content that follows it down. A bottom margin moves content that follows it down while leaving the block itself in the same place. That's very intuitive and probably behaves exactly how you'd expect.

Relative positioning does something strange: it changes where a block is drawn, but not where the space reserved for it is. So, if you use relative positioning and set top to 10px, a box will be moved 10px down the page -- but content after it will not move. That could cause a box to overlap with the content following it.

If you really want a strange effect (and to see relative positioning in action), apply both float: left and relative positioning to a small block. The block will be moved, but the area reserved for it will stay in its original place.

I made an example for you:

<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)

Fiddle

Answer 2

First off, static positioning ignores the top value so I think your question is a bit confused. If what you meant to ask about was position:relative, then here's an answer that addresses that.

Generally, I consider it much better to use margins and padding to position elements relative to their neighbors rather than relative positioning (which is what I assume you're really asking about since static positioning ignores the top value).

Relative positioning or negative margins can cause overlapping objects and that is rarely what I want and can lead to some issues with event routing, borders, backgrounds, etc... if that isn't explicitly what you want. I do you position:relative as a container for children that are position: absolute, but pretty much never use it for moving an element all by itself as borders and padding are nearly always cleaner for that.

As to the extra part of your question about what does margin do, you should probably do a little search and then some reading as a few diagrams would probably really help you visualize this. Margin is an outer set of pixels around an object. Inside the margin is the border. Inside the border is the padding and inside the padding is the content. So the margin is the number of pixels around the object that is outside the border and the padding is the number of pixels between the border and the content of the object.

If you have no border specified, margins and padding provide very similar effects except that margins of neighboring objects are sometimes collapsed (e.g. combined into a single margin), but padding is never combined that way and the background extends to the border, but not under the margin.

Here's a StackOverflow question/answer on margins vs. padding that provides some other useful references: When to use margin vs padding in CSS

Here's a good article about the CSS box model which covers margin and padding