有没有我可以遵循的 CSS 填充启发法？
我有一个简单的问题：
- 我有一个 div 内的图像。
- 为了使页面更美观，我将向图像添加一些额外的填充。
我不想盯着它看，而是想知道：
是否有我可以遵循的 CSS 填充启发法？
我在想雅各布·尼尔森这样的人可能已经建立了一些关于页面布局和填充（即最小像素填充或比例）的最佳实践。
- 我并不是说这是一个特别难解决的问题。
- 但这是一个可能会再次出现的问题。
- 我想要一些启发法来指导我将来的填充选择。
任何帮助将不胜感激。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
实际上对于这种事情有一些标准公式。
((a+b)/a) = (a/b))或大约 1.618。如果您的图像宽度为 100 像素，则除以黄金比例，直到得到不太大的图像。
因此，100 像素的黄金比例数字为 62、38、24、15、9、6、4、3、2、1。在 em 中，您可以使用分数宽度，因此您最终会得到 14.5、9、5.6 等
em 单位是字体中“m”宽度的函数，因此在 CSS 中它们可以在整个页面中更改。
“尺寸”是文本行的宽度。您希望度量值少于 2 到 2.5 个字母。 （您可以通过键入 abcdefg... 两次来测量字母表。）
Colin Wheildon 手册/书沟通或只是制作漂亮的形状对于布局版式和图像有一些极好的建议。它主要面向印刷品，但大多数相同的原则仍然适用。
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.
你有没有考虑过使用像这样的CSS框架：
我最喜欢的绝对是蓝图，它不像 YAML 或 YUI 那样过于臃肿，并且可以为您提供新项目的完美开始。据我所知，它为盒子之类的东西添加了 1.5em 的填充。此外，它的适应性也很容易。看看:)
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 :)
很难给您一个通用的答案，因为页面的总体外观会影响此选择。文字密度是多少？多少空白？有多少列？一页中有多少张图片？ 我认为
你应该自己尝试一下，你会很快找到你自己的典型填充尺寸或范围，你可以从它开始并在每个项目的基础上进行修改。
只需浏览雅各布·尼尔森的网站即可。我不管他的素质如何，你都不想从他那里得到审美指导。当然，他的许多可用性建议都很有价值，但请持保留态度。
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.