CSS : the difference between padding and margin

a basic explanation of the difference between padding and margin. HTML, CSS, beginners, howto

[francomussocom]

The clearest, most helpful explanation of padding vs margins I've found yet.
Using the diagram as opposed to distracting us with screen recording for a specific application really helped keep things simple and get the concept across.
Also, the breakdown of the 'shorthand' way to write the style was really useful - I always wondered which value was which... knowing now that it's simply clockwise from the top will save me lots of repetitive trial and error in the future.
Thanks for sharing :)

[xowi]

Thanks for the tutorial. Having a brain freeze over here and you helped thaw it out.

[nikkiluzvapor]

thank u so much for the help. its very clear explanation.

[desmod]

uhh.. not to bash or anything, but it seems as though the latest code works in a different way than in your diagram. I noticed that it works top left bottom right, , not top bottom left right. so when someone here is using padding like: 0px 20px 0px 20px; dont be confused.

[youricadet]

Padding=top, right, bottom, left
Padding-top, padding-right, padding-bottom, padding-left
Padding=20px, 16px, 20px, 16px;