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
29 Comments
Glad you included CNN. Im so in love with their website, from a design and usability perspective, ever since they redesigned it last year.
I could not agree more. Padding is forgotten about and misused. Nice writeup, and good examples of good and bad.
I do love my padding. =D
I think I applied 10px padding to pretty much every text tag on my last clients site.
You get natural padding and alignment with blogger.com try: www.lexleong.blogspot.com to check out what I mean.
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?
Gotta love the padding. Informative article. Thank you.
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.
@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?
Great post guys, really great examples here.
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...
By the way: why do all the quotes get stripped from a comment?
@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.
@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!
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!
Padding rocks. Nuff said :-).
Its all about the whitespace and negative space.
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...
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!
Some really nice examples ! Padding can really turn a crappy design into something nice and breathable.
C
Great site and nice examples, I couldnt agree more.
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.
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!
thanks for this post , it helped me a lot :D
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 :)
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!
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 :)
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.
@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 ;)
Excellent article. I love whitespace so much. Padding and margin are clutch.
Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.