The golden ratio of CSS

Intermediary trading http://www.aliyun.com/zixun/aggregation/6858.html"> SEO diagnostic Taobao customer hosting technology hall

This is an article published in CssGlobe by a Greek web designer named Christos Chiotis about the golden ratio in CSS. The golden ratio is a widely used mathematical constant, approximately 1.6180339887. The golden ratio is used in web design to bring more visual harmony to the design.

In a simple two-column page layout, two containers are used, the first one for the main content and the second one for the sidebar. For example, the page width is 960 px, using the golden ratio, the width of the main content container should be 960 / 1.62 = 593 px, and the width of the sidebar 960-593 = 367 px.

The authors suggest that you use the following basic CSS settings in Web layout and layout

line-height = font-size * 1.62

paragraph margin = paragraph line-height * 1.62 / 2

header's margin-top = headers line-height * 1.62

However, for Chinese, at least the golden ratio between font-size and line-height is not suitable, if the Chinese font uses 12px, the best line height is 22px, if the font uses 14px, the line height should use 24px - translator.

As another example, in a form, the width of the input box should be the width of the label text times 1.62. And for rectangles that appear on the web, its width should be height multiplied by 1.62.

As a result, Web designers also need good computing power, at least put a calculator next to, in order to save time, the author suggests to keep in mind a 62/38 principle in any design, in any need to be divided, Both use 62% and 38% of the ratio.

For the need to be divided into three occasions, you can press the 62%, 38% principle is divided into two, then the share of 62% and 38% of the split.

Source of this article: http://cssglobe.com/post/3117/golden-ratio-in-modern-css

Chinese translation Source: COMSHARP CMS (sharp business CMS) official website