有沒有可以遵循的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單位是字體寬度的函數，所以在CSS中它們可以在整個頁面中改變。

「measure」是文本行的寬度。你希望你的措施少於2到2.5個字母。 （通過鍵入abcdefg ...兩次來測量字母。）

Colin Wheildon小冊子/書溝通或製作漂亮形狀對佈置排版和圖像有一些很好的建議。它主要面向印刷品，但大多數相同的原則仍然適用。

Answer 2

你有沒有想過使用一個CSS框架，如：

• BluePrintCSS
• YAML
• YUI網格CSS
• 960 CSS網格系統
• 等（見本不錯article）

我最喜歡的是definitly藍圖，它不像YAML或YUI那樣臃腫，併爲您提供一個新項目的完美開端。據我所知，它爲盒子和其他東西增加了1.5em的填充。此外它容易適應。看看:)

Answer 3

很難給你一個普遍的答案，因爲頁面的一般外觀會影響這種選擇。多少文字密度？多少空白？多少列？一頁中有多少圖片？等

我認爲你應該試驗自己，你會很快找到自己的典型填充大小或範圍，你可以開始和修補每個項目的基礎上。

只需看看Jakob Nielsen的網站。我不在乎他的口徑是什麼，你不想從他那裏獲得美學指導。當然，他的很多可用性建議都是有價值的，但一切都需要一絲鹽。