我可以遵循任何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中它们可以在整个页面中更改。

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

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

Answer 2

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

• BluePrintCSS
• YAML
• YUI Grids CSS
• 960 CSS网格系统
• 等等（请参阅此article}）

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

Answer 3

很难给出一般答案，因为页面的一般外观会影响这种选择。文字密度是多少？白色空间多少钱？多少列？一页中有多少张图片？等

我认为你应该自己试验一下，你会很快找到你自己的典型填充尺寸或范围，你可以从每个项目开始并修补。

看看Jakob Nielsen的网站。我不在乎他的口径是什么，你不想得到他的美学指导。当然，他的许多可用性建议都是有价值的，但是可以用一点点盐。