It's actually a simple concept and once you understand you'll never forget. Think of your container such as "content" or "header" as a house. Margin is the space between your house and the next building. Padding is the space between your wall and your furniture. If you were to paint your "house" it would only apply to what's inside of it instead of the alley way between your house and your neighbor's.
Margin effects the outside of the container to which it is applied. The greater the margin, the greater the distance between it's container and the next. Padding effects the inside of its container, increasing the distance between the edge and the content within. Once background colors or images are applied the difference becomes more apparent.
Tips
This is another variation on the "misc" module and some useful tips when using the Karma Design Wizard.
The difference between margin and padding can be baffling to folks just starting out with web design. After all, if there is no background color or background image involved they appear to do the same thing. If you tried to figure out the difference when IE 5 or IE 5.5 was the major browser you would be even more confused since the browser itself got it wrong. Luckily, IE6 improved it's "box model" and today all major browsers get it right.
The Basic Concept
When It Gets Tricky
You might be thinking "OK, it doesn't really matter as long as I don't use a background color or image." Well, that's true as long as you aren't giving your container a width. If you give a container a width you have to keep in mind that width includes the padding dimensions. It would be nice if that weren't the case, but alas it is true. I'm sure someone somewhere has a good reason for creating it this way...
Suppose you have a fixed width container within a container such as individual teasers within the teaser group and neither have a background color or image. You would like to put some space between the teaser group wall and the the teaser it holds. Does it matter if you use padding or margin? Yes.
Suppose you have a fixed width container within a container such as individual teasers within the teaser group and neither have a background color or image. You would like to put some space between the teaser group wall and the the teaser it holds. Does it matter if you use padding or margin? Yes.
Padding + Width = Actual Width
If you choose to use padding you will place it on the outside container since it's the content inside of it you want to move over. Placing padding on this fixed width container will cause its actual width to expand in the amount of both padding-right and padding-left combined. For example, if your declared width is 200px, and your padding-left and padding-right are each 20px, the actual width will now be 240px.
Declared Width (200px)
+ Padding-left (20px)
+ Padding-right (20px)
-----------------------
= Actual Width (240px)
If this container needs to fit within a 200px wide space you'll need to adjust the declared width to 160px to compensate for the padding.
Declared Width (200px)
+ Padding-left (20px)
+ Padding-right (20px)
-----------------------
= Actual Width (240px)
If this container needs to fit within a 200px wide space you'll need to adjust the declared width to 160px to compensate for the padding.
Margin
If you choose to use margin it should be placed on the inside container, in this example the individual teaser. Because you are only telling the inside container to change and not the outside one, the width isn't effected and no further adjustments need to be made.
