Img position offset when html web pages use rem to calculate units

1. The code for calculating units using px is as follows:
clipboard.png
:
clipboard.png

2.rem1rem=100px:
clipboard.png
:
clipboard.png

3.rem1rem=50px:
clipboard.png
:
clipboard.png
(shows normal)

the above tests are carried out in chrome and opera browsers, and the width and height of div and img are both 80px. After testing, when the rem of the div > 1.06, the display is normal, and when the img is less than this value, the img shifts downwards.

find out the cause of the problem, thank you.

Mar.22,2021

this has to do with many reasons. I can only guess if I can't see the specific effect in the browser.

guess that 1:img has no block attribute added.
guess 2: you must have adapted if you set rem. So depending on the size of your browser, the fontSize of your html may no longer be 100, but with decimals, infinitely decimal, such as 0.33333333. It's the kind of thing. The browser will round it to 0.3. The less 0.3 is squeezed down,
guess 3: because you set border, it is possible to squeeze down because the actual width of div = width+border picture = the actual width of 100%=div = div.width+ border.

keep asking questions. If you think this answer is serious, please adopt and like it.

Menu