css - 我可以遵循任何 CSS 填充启发式方法吗？

Question

我有一个简单的问题：

• 我在 div 中有一个图像。
• 为了使页面更美观，我将为图像添加一些额外的填充。

与其盯着它看，我想知道：

我可以遵循任何 CSS 填充启发式方法吗？

我在想像 Jakob Nielsen 这样的人可能已经建立了一些关于页面布局和填充（即最小像素填充或比例）的最佳实践。

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

任何帮助，将不胜感激。

Answer 1

这种事情实际上有一些标准公式。

1. 三分法。如有疑问，请将其分为三个部分。除以三，直到你得到合理的结果。
2. 黄金比例——这有点难，你真的需要一个像黄金分割这样的程序才能正确地把它拉出来，但基本的想法是你的填充应该是黄金比例的倍数。黄金比例是((a+b)/a) = (a/b))或约为 1.618。
3. A4 比例。我不知道这个叫什么——但它是 1.414，它是一张 A4 纸的比例。
4. 如果你坚持下去，几乎任何比例都会让你的网格看起来很平衡。

如果你的图像是 100 像素宽，你除以黄金比例，直到你得到一个不是很大的东西。

所以 100 像素的黄金比例数字是 62、38、24、15、9、6、4、3、2、1。在 ems 中，您可以使用小数宽度，因此最终得到 14.5、9、5.6 等。

em 单位是字体中“m”宽度的函数，因此在 CSS 中它们可以在整个页面中更改。

“度量”是文本行的宽度。您希望度量小于 2 到 2.5 个字母。（您通过键入 abcdefg... 两次来测量字母表。）

Colin Wheildon 小册子/书“沟通或只是制作漂亮的形状”对于排版和图像的布局有一些很好的建议。它主要面向印刷，但大多数相同的原则仍然适用。

Answer 2

您是否考虑过使用 CSS 框架，例如：

• 蓝图CSS
• YAML
• YUI 网格 CSS
• 960 CSS网格系统
• 等等（请参阅这篇不错的文章）

我最喜欢的绝对是蓝图，它不像 YAML 或 YUI 那样过于臃肿，为您的新项目提供了一个完美的开始。据我所知，它为盒子和类似的东西添加了 1.5em 填充。此外，它易于适应。看一看 ：）

Answer 3

很难给你一个笼统的答案，因为页面的整体外观会影响这个选择。文字密度是多少？有多少空白？有多少列？一页有多少张图片？等等

我认为您应该自己进行试验，您会很快找到自己的典型填充大小或范围，您可以从每个项目开始和修补。

看看 Jakob Nielsen 的网站。我不管他的水平如何，你不想从他那里得到美学指导。当然，他的很多可用性建议都很有价值，但要持保留态度。