Difference between padding and position:relative values


#1

https://www.codecademy.com/courses/learn-html-css/lessons/layout/exercises/position-relative?action=lesson_resume&link_content_target=interstitial_lesson


Hi,
 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?
Thanks.


#2

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


#3

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