Difference between padding and position:relative values


#1

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

https://www.codecademy.com/courses/learn-html-css/lessons/layout/exercises/position-relative?action=lesson_resume&link_content_target=interstitial_lesson
<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

```

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.

<do not remove the three backticks above>

#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.