The golden ratio of CSS

Source: Internet
Author: User
Tags aliyun application design designer hosting html http named

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.