Are there any CSS padding heuristics that I can follow?

Question

I have a simple problem:

• I have an image inside of a div.
• In order to make the page more aesthetically pleasing, I'm going to add some additional padding to the image.

Rather than eyeball it, I'd like to know:

Are there any CSS padding heuristics that I can follow?

I was thinking that somebody of Jakob Nielsen's caliber might have established some best practices about page layout and padding (i.e. minimum pixel padding or proportionality).

• I'm not claiming that this is an especially difficult problem to solve.
• But it's a problem that will likely come up again.
• And I'd like some heuristics to guide my padding choices in the future.

Any help would be appreciated.

Answer 1

have you thought about using a css framework like:

• BluePrintCSS
• YAML
• YUI Grids CSS
• 960 CSS Grid System
• and so on (see this nice article)

my favourite is definitly blueprint, its not too bloated like YAML or YUI and gives you a perfect start for a new project. as far as i know it adds an 1.5em padding to boxes and such things. furthermore its easy adaptable. have a look :)

Answer 2

It's hard to give you a general answer because the general look of the page influences this choice. How much text density? How much white space? How many columns? How many images in one page? etc.

I think you should experiment yourself and you will quickly find your own typical padding size or range which you can start with and tinker on a per project basis.

Just have a look at Jakob Nielsen's web site. I don't care what his caliber is, you don't want to get aesthetics guidance from him. Of course a lot of his usability advice is valuable but take it all with a grain of salt.

Answer 3

There actually are some standard formulas for this kind of thing.

1. The law of thirds. When in doubt, split it into three parts. Divide by three until you get to something reasonable.
2. The Golden Ratio - this is a little tougher, and you really need a program like Golden Section in order to pull it off correctly, but the basic idea is that your padding should be some multiple of the Golden ratio. The Golden Ratio is ((a+b)/a) = (a/b)) or about 1.618.
3. The A4 ratio. I don't know what this one is called - but it's 1.414 it's the ratio of a sheet of A4 paper.
4. Almost any ratio will make your grid look balanced if you stick to it.

If your image is 100 pixels wide, you divide by the golden ratio until you get something that's not WAY to big.

So golden ratio numbers for 100 pixels are 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. In ems you can use fractional widths, so you wind up with 14.5, 9, 5.6 etc.

em units are a function of the width of your "m" in the font, so in CSS they can change throughout the page.

The "measure" is the width of line of text. You want your measure to be less than 2 to 2.5 alphabets. (You measure an alphabet by typing the abcdefg... twice.)

The Colin Wheildon brochure / book Communicating or Just Making Pretty Shapes has some excellent advice for laying out typography and images. It's largely oriented toward print, but most of the same principles still apply.