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).
Good.is
Digital Mash
Creattica Daily
Clovelly Country Club
Ruby Tuesday
DrupalCon
TypeChart
TreemoLabs
Kyan Media
Surfstation
Checkout
Macalicious
CNN.com
Recent Comments
Top Matt 18 - Nov - 2008 17:45:53 PM
Glad you included CNN. Im so in love with their website, from a design and usability perspective, ever since they redesigned it last year.
Top Jason 18 - Nov - 2008 20:23:43 PM
I could not agree more. Padding is forgotten about and misused. Nice writeup, and good examples of good and bad.
Top Paul Davis 18 - Nov - 2008 20:52:55 PM
I do love my padding. =D
I think I applied 10px padding to pretty much every text tag on my last clients site.
Top Lex 19 - Nov - 2008 00:22:44 AM
You get natural padding and alignment with blogger.com try: www.lexleong.blogspot.com to check out what I mean.
Top neto_arellano 19 - Nov - 2008 01:40:49 AM
Im nubby in this stuff and the fucking padding gave me a headache days before, but now i think i got it. What do you do for living eh?
Top Jon Williams 19 - Nov - 2008 06:12:57 AM
Gotta love the padding. Informative article. Thank you.
Top Matt 19 - Nov - 2008 19:02:57 PM
Great post, and could not possibly agree more. Padding is mans best friend, even before Dog...or at least it is in my book.
I have been a huge fan of Macalicious for some time now. They do an excellent job overall, throughout the site with whitespace in general.
Top David Perel 19 - Nov - 2008 19:08:51 PM
@Matt - I spend most of my time on cnn.com, in fact one of the sites we created - Peresoft.com - is direct inspiration from cnn.com (and portfolio.com). I think it is a brilliant design.
@Neto - We own a webdesign company called OBOX-Design. You can check out our work at www.obox-design.com
@Jon Williams and @Matt - Thanks for the props guys!
P.S Anyone willing to help with some diggs?
Top liam 20 - Nov - 2008 15:41:30 PM
Great post guys, really great examples here.
Top Thomas Eilander 21 - Nov - 2008 01:08:00 AM
Im sorry but whats new about this post..?
Is this what blogging is about? Writing an article about padding and margin which are major css root elements? And waiting for reactions like Great post and Good examples?
There can be found thousands of articles about this subject on the net... I always read you guys blog and I like it pretty much... But this was not worth the post...
It smells like 30 sites with stunning margin and padding... Dont lower to that level...
Top Thomas Eilander 21 - Nov - 2008 01:10:50 AM
By the way: why do all the quotes get stripped from a comment?
Top David Perel 21 - Nov - 2008 09:23:32 AM
@Thomas - Thanks for your comments mate, please understand that professional designers are not the only peeps who read our blog. I have also been visiting tonnes of sites lately which clearly have no clue about consistent padding.
Since it is something that I dedicate a lot of time to I thought I should blog about it. Everyone talks about grids grids grids but I have always felt that you dont need a grid if your padding is right. So based on that I thought ok let me blog it.
Only once I had completed writing the article did I decide to include some sites which are good examples.
I dont think we will ever go to a level of our 150 best red sites. Like you say, there are tonnes of sites which do that already.
RE the quotes, we havent got spam filters on this site so we have strip anything from the comments which are potentially dangerous. We hope to fix it in the future though.
Top Thomas Eilander 21 - Nov - 2008 10:03:16 AM
@David: Okay, I see your point. Maybe a was in some bit of a bad mood yesterday :-)
Keep up the good work! Still like you guys blog and the couch thing!
Top Got it! 28 - Nov - 2008 22:57:22 PM
There are no words to describe how much I liked Kyan Media. I have been looking for direction for my blog design for weeks and I think I just found it. Less is more. Thank you, thank you, thank you!
Top Patrick ortman 27 - Dec - 2008 21:54:25 PM
Padding rocks. Nuff said :-).
Its all about the whitespace and negative space.
Top WebdesignerDepot 09 - Jan - 2009 07:24:11 AM
I love padding too. Ive worked with lots of programmers and for some reason, programmers make all my designs tight with no padding - i always have to ask for more padding and then, some more...
Top Chicago SEO - Rob Buti 14 - Apr - 2009 06:47:47 AM
Of course you need padding, but the problem always seem to be with cross browser issues. My site looks great in Firefox, thanks to Firebug, but it looks messed up in IE!!! So I rig it up using the If IE6.... which is probably not the right way to do it, but oh well!
Top Carl - Web Courses Bangkok Instructor 29 - Apr - 2009 08:02:31 AM
Some really nice examples ! Padding can really turn a crappy design into something nice and breathable.
C
Top Chicago SEO 22 - May - 2009 19:56:48 PM
Great site and nice examples, I couldnt agree more.
Top Chicago SEO 23 - May - 2009 07:58:27 AM
Come on man, you have to leave a better message than that when you are trying to get a quality link back to your site.
Top Chciago SEO Company 23 - May - 2009 08:02:20 AM
The real problem again is IE6, anyone got a good script that shows up when your page is viewed in IE6 that says "You need to update your browser to view this site"? I am so sick of designing a site that looks great in IE7 and firefox, but IE6 destroys it! Sick of it!
Top Haifa 14 - Jun - 2009 12:57:06 PM
thanks for this post , it helped me a lot :D
Top sindustries 14 - Jun - 2009 20:26:13 PM
I think the best method of integrating padding and margins is at the design stage.
Simply design you index and you should then keep the same values of p/m across the whole site :)
Top Bowsie 14 - Jun - 2009 21:52:56 PM
Yeah, wish Id found this post when I was on the padding/margin discovery mission. I had to learn the usual forum/trial&error way. Padding & margins are now a CSS staple for me, and I think I have it pretty waxed. Still using the odd tables until I can master usage of float & clear with divs, though.
Im quite a fan of your design David, I recently came across obox (after finding you & your boet on twitter search, after seeing you on the 27 dinner guest list). I think you guys have a pretty solid grasp of web 2.0 methodology and are quite decent with slick looking "finishes". keep it up, and dont be afraid to really go "out of the box" with even more funky and unconventional design. Push that envelope!
Top dorinn 22 - Jul - 2009 22:36:50 PM
finally someone explained the difference between those 2, i always wondered why my 960 stretches out to be close to 1000 tnx for the info, though i have a lot of recoding to do :( ps: u should add bbc.co.uk for good padding, way better than cnn in my opinion :)
Top godofredo 08 - Sep - 2009 10:48:03 AM
As it is defined now by w3c padding is a fucking almost usseles thing. It is stupid to add the padding to the width of an element. If I want a 200px whidth, it means I want a 200 px width. An if I want a 100% width whith padding I don´t mean I want a 100% padding width. As it behabe now is no way to do, for example, a 100% element with 40px padding left and right. Absurd. I never use padding. I only use margin and simulate padding whith margin of inner elements.
Top David Perel 08 - Sep - 2009 11:29:19 AM
@godofredo - It is all relevant to the element that you are creating dude. Its never as cut and dry as you make it out to be. Often you should create a containing div and then house your padded div inside that. Its easier for changes which may occur at a later stage in the design lifespan.
Padding is hardly a useless thing. In fact it can be invaluable.
Create a div within a div, then set the child divs margin-top to 10px. See what happens. It will pull the parent div down 10px as well. The solution? Padding ;)
Top Phil Davis 09 - Dec - 2009 09:04:30 AM
Excellent article. I love whitespace so much. Padding and margin are clutch.