Difference between padding and position:relative values

[iahmedd]

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

[stetim94]

i wrote an extensive explanation here:

Margin should be 10px, not -10px

About positioning, i assume you figured out padding? Now, we have 4 different positions: static (which is default) relative absolute fixed lets start with static, you can push static elements around with margin. pretty simple. It is getting interesting when use the 3 remaining positions, because besides margin, we then also have: left, right, bottom, top which we can use to position our elements, lets start with absolute, from the exercise: The first type of positioning is absolute posi…

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

https://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png

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