Golden split rate in CSS

This is a Greek web designer named Christos chiotis published in cssglobe.ArticleDescribes the application of the Golden split rate in CSS. The golden split rate is a widely used mathematical constant, about 1.6180339887. The golden split rate is used in web design, which can bring more visual harmony to the design.

In a simple two-bar page layout, two containers are used. The first container is used to display the main content, and the second container displays the side bar. For example, if the page width is 960 PX and the golden split rate is used, the width of the main content container should be 960/1 .62 = 593 PX, and the width of the side bar should be 960-593 = 367 PX.

The author suggests that the following basic CSS settings can be used 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 split rate between Font-size and line-height is not suitable. If the Chinese font uses 12px, the optimal Row Height Is 22px, if the font is 14px, the line height should be 24px-translator.

In another example, in a form, the width of the input box should be the width of the label text multiplied by 1.62. For the rectangle displayed on the web, the width of the rectangle should be multiplied by the height by 1.62.

In this way, web designers need good computing power at the same time, and at least a calculator should be placed next to them. To save time, the author suggests keeping a 62/38 principle in mind during design, 62% and 38% are used in any part of the system.

For scenarios that need to be divided into three parts, you can first divide the size into two parts based on the 62% and 38% principles, and then divide the size into a ratio of 62% and 38%.