What’s the difference between margin and padding tag in CSS

I am a total geek on CSS Design Programming . And I wanna have a start . In fact , I was learning  a video tutorial from Lyda.com , called “Dreamweaver CS4 with CSS Essential Training” . There was once a problem puzzled me a lot . Although I have read some text , but I think it helpful to a CSS starter to learn better about what is the difference between margin and padding tag in CSS .

We can have a brief view on these two Tags . In my words , I think both margin and padding tags in CSS can help you to seperate your items apart from others , which will allow you a margin between each other . Since these are diferent things ,  we should tell them apart .
[ad#PostRight]

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

I think the following image may be more helpful to help you to learn :

I think the key point lies in the whether they will be affected by background (Padding  Yes while Margin No)

[ad#UnderPost]
If you meet other question when learning Web Design programming or other programming , feel free to contact me and maybe it will be helpful for both you and me . Greatings from aebeta