Hi when making an element relative, when should I use margin-top and when should I use margin-top? Are they the same?
Yes, margin-top and margin-top are the same.
But I suspect that wasn’t what you meant to ask…
when making an element relative, you are supposed to use top. why:
- margin-top has to do with the element’s box model. it adds to its box model height.
- top has to do with its position, the offset. the offset leaves the box model’s height at the same value.
that says top and margin-top are not the same.
so: top is the same box, but moved, margin-top is a “taller” box. by position:relative you declare your intention to move the box, not change it to a bigger one. so top it is 
on the side note: position:relative has two effects:
- the element will still occupy its box model space at the position where he was previously before being moved using top, left.
- it will appear “floated” to the new position, that is, w/o taking space, like being taken out of the normal flow at its new position.
using only margin-top on a position:relative element will only “move” the content inside it, the element will be found at the same offset.
no, the element will keep the offset, it will just have a “taller” box model. its content will actually move, i.e. the margin top values will affect the offset (like top, for example) for the elements inside it and for those that calculate their box model based on its box model, like the elements after it.
margin-top has to do with the box model of an element.
top has to do with the offset for the box model, the box position inside parent elements, if the element is not static. if its position is static, top has no effect on it.
@noonnope so when using margin-top on a position-static element, the element will actually move and not be found at the same offset?
Though I’d point out negative margins can make an element appear over/under another one due to the size of it’s ‘flow box’ (what noonope calls box model space) shrinking… It’s flow is smaller, but it’s drawn at it’s full size. In those cases, you MAY end up using position:relative on it to make sure it depth sorts how you want — either by using z-index, or simply that position:relative and/or absolute elements always depth sort over non-positioned elements.
thanks my mistake as you realised I was asking about the difference between margin-top and top. I understand the difference now.
Also on a related note I was speaking to another dev who told me that he always puts position:relative to all elements in the CSS Reset. Is this good practice?
What about that, is it good practice to do this?
it’s not something good or bad if it doesn’t have a reason. give me a reason to do something like this and we’ll see.
Also on a related note I was speaking to another dev who told me that he always puts position:relative to all elements in the CSS Reset. Is this good practice?
Internet Explorer has a bug when the body is made position: relative, so I’d not do it myself. However, someone may have put it in a reset in order to combat other bugs (this may be why your dev does this), but I would say it’s not a good idea.
If you use something like Chrome’s Inspect, Opera’s Dragonfly or Firefox’ Firebug, you can see the amount of space an element is taking up with margins vs positioning (margins can be highlighted which I find useful since I can’t otherwise make margins visible).
The elements are kind of like house shingles, except they overlap the other way (from bottom of the page to top). Ew, like petting a snake backwards!