Difference between EM and PX in CSS

What is Em?
Em indicates the font height. The default font height of any browser is 16 PX. Therefore, the unadjusted browsers all match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare font-size = 62.5% in the body selector in CSS, which changes the EM value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original PX value by 10, and then change to Em as the unit. Em has the following features:
1. The EM value is not fixed;
2. Em inherits the font size of the parent element.

Rewrite steps:
1. Declare font-size = 62.5% in the body selector;
2. Divide your original PX value by 10 and change it to Em as the unit;
Simply put, if you only need to solve the problem in the above two steps, no one may use PX. After the above two steps, you will find that your website font is too big to imagine. Because the EM value is not fixed and inherits the size of the parent element, You may set the font size to 1.2em in the content Div, that is, 12px. Then you set the font size of selector P to 1.2em. However, if p is a child of content, the font size of P is not 12px, instead, 1.2em = 1.2 * 12px = 14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent-level element body, that is, 16px * 62.5% * 1.2 = 12px, and P is its sublevel, em inherits the font height of the content, that is, 12px. So the 1.2em of P is no longer 12px, but 14.4px.
3. recalculate the EM values of the enlarged fonts. Avoid repeated statement of font size, that is, avoid the 1.2*1.2 = 1.44 mentioned above. For example, if you declare in # content that the font size is 1.2em, the font size of P can only be 1em, not 1.2em, because this EM is not em, it becomes 1em = 12px because it inherits the font of # content.