I am a padding addict. I love padding so much that if I turned into a pillow I would probably be happy.

No seriously. I consider margins and padding to be more critical than 960.gs or the 10px method. You can have the best grid based layout but if your padding / margins are out it will not look good.

I usually spend more time making sure that all my padding is correct than if my site fits perfectly within a grid. It facilitates relevant information, separation and more importantly, white space management.

Below is an image which shows the difference between margins and paddings. Often people can confuse the two and get frustrated when things don’t look right.

I am going to unscientifically explain the difference between the two but I think that the image explains it better:

• Margin is the distance between one element and its surrounding elements.
• Padding is the distance of items within an element.

Now that I have confused myself, here is the image:

Without the correct margin or padding items can look disconnected, out of line and can create layout headaches for the elements which surround it. Padding can also dictate the character and readability of your site.

A site with lots of padding will look open, minimalist and easy to read. If you have too little padding things can look claustrophobic and it can be difficult to distinguish between sections on the site.

Below is a bad example of margins & padding, and a good one.

Bad Padding

Unfortunately this site has no padding within its (table!) elements, this creates a sense of claustrophobia between text and container.

Good Padding

Creattica Daily is a good example of how padding creates great white space management and also allows for easy reading of the title and its content.

Below are some sites which I think get their spacing just right, not just in padding and margins but also heading & paragraph line heights (which is another story for another day).