Which CSS units to choose. Which is better, percentages, pixels, em, etc.

18.07.18 IT / CSS 3595

When developing a site, CSS cascading style sheets are actively used. They use various units of measurement, including pixels, percentages, inches, etc. In the process of coding a website page, a developer often faces the question of which units to use.

Indeed, why is so many units in CSS for? This is for convenience and flexibility. The developer can independently apply the necessary units of measurement based on the task. You can often notice how thoughtlessly only one unit of measurement is used throughout the site, chosen for some reason. This is the wrong approach, you need to use units based on the situation.

What units of measure exist in CSS ? All units of measurement can be divided into two broad categories: relative and absolute . Relative units determine the size of an element relative to a value of a different size, while absolute units are independent of the output device.

Relative units are often used to work with text content or when you need to calculate the percentage between elements. Relatives include:

• The font height of the current element ( em ),
• Height of letter x ( ex ),
• Pixels ( px ),
• Interest (% ).

As for absolute units, they are used less often than relative ones. Absolute units include:

• Inch, 1 inch equals 2.54 cm ( in ),
• Centimeter ( cm ),
• Millimeter ( mm ),
• Point, 1 point equals 1/72 inch ( pt ),
• A peak, 1 peak equals 12 points ( pc ).

Now that we have examined the units of measurement and their groups, let's figure out which units to use where. It is worth remembering that the choice of units of measure also depends on the output device, for example, screen or print . The following are recommended for the screen: em, px,% . For printing, you can use: em, cm, mm, in, pc, pt,% . For example, when laying out a page, the width of the blocks can be set as a percentage, the height in pixels, the size of the text in em or pixels. Thus, it is up to the developer to decide which CSS units to choose based on the needs.