The difference between px, em and rem in css

Preface

em and rem are flexible and scalable units, converted to pixel values ​​by the browser, depending on the font size in the design, if using the value 1em Or 1rem, which can be converted by the browser from 16px to 160px or any other value. Browsers use 1px , so 1px is always displayed as exactly 1px.

The similarities between em and rem

Using em and rem units can make our design more flexible and control the overall enlargement and reduction of elements instead of fixed sizes

The difference between em and rem

The difference is who the browser converts into px value

How the rem unit is converted into pixel value

When using rem units, their conversion to pixel size depends on the font size of the page root element, that is, the font size of the html element. The root element font size is multiplied by your rem value.

For example, the font size of the root element is 16px, 10rem will be equivalent to 160px, that is, 10 x 16 = 160.

How em units are converted to pixel values

When using em units, the pixel value will be the em value multiplied by the font size of the element using em units. For example, if a p has a font size of 18px, 10em will be equivalent to 180px, which is 10 × 18 = 180.

Key understanding:

There is a common misunderstanding that the em unit is the font size relative to the parent element. In fact, according to the W3 standard, they are relative to the font size of the element using em units. The font size of the parent element can affect the em value, but this happens purely because of inheritance. Let's see why and how it works.

What you need to know:

The root html element will inherit the font size set in the browser, unless a fixed value is explicitly set to override it. So although the font size of the html element is directly determined by the rem value, the font size may first come from the browser settings. So the browser's font size setting can affect every value that uses rem units and every value inherited through em units.

Summary of the differences with rem

All the above boils down to the following:

1. rem units translated into pixel values ​​are determined by the html element Determined by the font size. This font size is affected by the font size setting in the browser unless a specific unit is explicitly overridden.
   

2. #em units are converted to pixel values, depending on the font size they are using. This font size is governed by the font size inherited from the parent element, unless explicitly overridden with a specific unit.
   

Why use rem units:

Rem units provide the greatest power and it's not just that they provide consistent size rather than inheritance . Instead, it gives us a way to obtain user preferences and influence the size of elements using rem everywhere on the website, instead of using fixed px units.
For this reason, the main purpose of using rem units should be to ensure that our layouts resize to the appropriate size no matter how users set up their browsers.

Why use em unit

The em unit depends on a font-size value rather than the font size of the html element.

To this end, the main purpose of the em unit should be to allow extensibility to remain within the scope of a specific design element.

For example, you may use the em value to set the padding, margin, line-height and other values ​​of the navigation menu item. Menu with 0.9rem font size

This way, if you change the menu's font size the spacing around the menu items will scale proportionally in the remaining space.

Summary

rem and em units are pixel values ​​calculated by the browser based on the font size in your design.

em units are based on the font size of the element using them.

rem units are based on the font size of the html element.

em Units may be affected by any inherited font size of the parent element

rem Units may inherit the font size from the browser font settings.

Using em units should be based on the font size of the component rather than the font size of the root element.

Use rem when you do not need to use em units and need to set scaling according to the browser's font size.

Use rem units unless you are sure you need em units, including for font size.

Use rem units in media queries

Don’t use em or rem in multi-column layouts - use % instead.

Don't use em or rem if scaling will inevitably result in breaking layout elements.

For more articles related to the differences between px, em and rem in css, please pay attention to the PHP Chinese website!