I have a simple problem:
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).
Any help would be appreciated.
There actually are some standard formulas for this kind of thing.
((a+b)/a) = (a/b))
or about 1.618.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.
have you thought about using a css framework like:
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With