代码之家 › 专栏 › 技术社区 › Jim G.

有没有我可以遵循的CSS填充启发式方法?

heuristics padding css

Jim G. · 技术社区 · 14 年前

I have a simple problem:

我在一个分区里有一个图像。
In order to make the page more aesthetically pleasing, I'm going to add some additional padding to the image.

与其盯着它看,我更想知道:

有没有我可以遵循的CSS填充启发式方法?

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).

我不是说这是一个特别难解决的问题。
但这是一个可能会再次出现的问题。
我想用一些启发式方法来指导我以后的填充选择。

任何帮助都将不胜感激。

3 回复 | 直到 14 年前

prater 14 年前

实际上是这类事情的一些标准公式。

The law of thirds. When in doubt, split it into three parts. Divide by three until you get to something reasonable.
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)) 或者大约1.618。
A4比例。I don't know what this one is called - but it's 1.414 it's the ratio of a sheet of A4 paper.
如果你坚持下去,几乎任何比例都会使你的网格看起来平衡。

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... 两次。

Colin Wheildon小册子/书 沟通或只是做出漂亮的形状 has some excellent advice for laying out typography and images. It's largely oriented toward print, but most of the same principles still apply.

Oliver 14 年前

您是否考虑过使用CSS框架,例如:

蓝宝石
钇铝石榴石
YUI网格CSS
960 CSS Grid System
等等(看看这个 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. 看一看:

allesklar 14 年前

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? 等。

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.