Difference between padding and position:relative values



 I want to know what's the difference between padding/margin which 
are used in positioning , and {positioning} property with the rules:
"top-right-bottom-left" (with relative positioning)
Couldn't we just use padding and margin to move
the element wherever we want?


i wrote an extensive explanation here:

padding is the spacing inside the element, which is demonstrated nicely on this picture:

so, we can't use padding to move the element. We need margin/top-right-bottom-left for this

for example in this bin, see what happens when you change margin-top to top?

top behaves very different, which only works on non-static element as explained here

furthermore, if we throw float property and position: absolute; in the mix, things change even more

to understand the delicate balance between this different positioned elements, you need practice


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.