The difference between PX, EM, and REM in CSS

Preface

Both EM and REM are flexible and extensible units, converted by the browser to pixel values, depending on the font size in the design, and if the value is 1em or 1rem, it can be converted from 16px to 160px or any other value by the browser. The browser uses 1px, then 1px is always displayed as full 1px.

The same point of EM and REM

Using EM and REM units allows us to design more flexibly and to control the overall enlargement of the elements rather than the fixed size

EM and REM differences

The difference is that the browser converts the PX value according to WHO

How REM units are converted to pixel values

When using REM units, they convert to pixel size depending on the font size of the page root element, which 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 16px,10rem will be equal to 160px, which is 16 x = 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 18px font size, 10em will be equivalent to 180px, which is 10x18 = 180.

Focus on understanding:

There is a more general misconception that the EM units are relative to the parent element's font size. In fact, according to the W3 standard, they are relative to the font size of elements 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 inherits the font size set in the browser unless you explicitly set a fixed value to overwrite it. The font size of the HTML element, though, is directly determined by the REM value, but the font size may come first from the browser settings. Therefore, the font size setting of the browser can affect each value that uses REM cells and each inherited by EM units.

Summary with REM difference em

All of the above are summed up as follows:

1. The REM unit translates to a pixel value that is determined by the font size of the HTML element. This font size is affected by the font size setting in the browser, unless you explicitly override a specific unit.
   

2. The EM units are converted to pixel values, depending on the font size they use. This font size is affected 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 not only for them to provide uniform dimensions but not inheritance. Instead, it gives us a way to get the user's preferences to affect the size of each element in the site that uses REM, no longer using a fixed PX unit.
For this reason, the main purpose of using REM units should be to ensure that regardless of how users set up their own browsers, our layouts can be sized to fit.

Why Use EM units

EM units depend on a font-size value rather than the font size of the HTML element.

For this reason, the primary purpose of the EM unit should be to allow scalability to be maintained within a particular design element range.

For example, you might use the EM value to set the padding, margin,line-height equivalents of the navigation menu item. Menu with 0.9rem font size

In this way, if you change the font size of the menu, the spacing around the menu item is scaled proportionally in the remaining space.

Summarize

REM and EM units are pixel values that are computed by the browser based on the font size in your design.

EM units are based on the font size used for their elements.

The REM unit is based on the font size of the HTML element.

EM units may be affected by any inherited parent element font size

REM units can inherit the font size from the browser font settings.

The use of EM units should be based on the font size of the component rather than the root element's font size.

Use REM When you do not need to use EM units, and you need to scale based on the font size of your browser.

Use REM units unless you are sure you need EM units, including the font size.

Use REM units in media queries

Do not use EM or REM in multi-column layouts-instead of%.

Do not use EM or rem if scaling inevitably results in breaking layout elements.