Using REM unit to secure its same position on the screen when font-size changes?
I'm trying to understand the behavior of REM units when used for element positioning. While pixels (px) maintain a fixed position regardless of font size, using REM seems to always lock the element's screen position. I expected REM unit to cause some shifts in positioning based on the root font size. Can someone explain the relationship between using REM for positioning and how it affects an element's screen location?
As an example: I was doing this desktop only form for learning (Github repo: https://github.com/Suqbs/sign-up-form and Live: https://suqbs.github.io/sign-up-form/) and *Passwords do not match is what leads me to this question because even if the font size changes it is still there, not even shifting. So, this isn't a problem to solve but i want to understand how is it doing this and is this applicable for every scenario?
2 Replies
It looks like you have most things set in
rem, so if you change the html font-size, then everything set in rem is going to change with it.
Right now, you're padding is in rem, for example, so the right on that element gets bigger, but so does the padding, and they get bigger by the same factor, so everything stays aligned.
If you were to make the right 112px (which is 7 * 16), it will line up, but if you change the html font size, the alignment breaks, because it's still 112px from the left, but other things have moved.So, this is applicable if i use rem on everywhere right? I wanted to know if there is an edge scenario or something like that. Thank you for your response Kevin, hard to understand but your videos help too much.