In CSS there are two types of relative measures: em and rem . The first is a point by one that takes as reference the size of the parent element. In the second case, we have as much for one. Now this doesn't reference the parent element, but, from what I've read, the root element.
Investigating, I have also read that by "root element" they refer to the original or standard style of the HTML tags for the specific element on which we are working.
But it doesn't fit me and I'll give you an example to illustrate the origin of my doubt:
#div{
width: 20rem;
height: 20rem;
background: red;
margin-top: 100px;
}
A div
, by default, should have measures 0x0. Now, it is very clear that if you apply this style to a div
, the size is different.
So: where do the reference measurements for the rem unit come from?
rem is a measure relative to the size of the browser font, by default it is 16px so: 1rem = 16px
Also as a tip you can reference the global fontsize in the css as 62.5 which makes: 1rem = 10px
And so it's an easy measure to remember and use.
It is recommended to use rem as the unit of measure in the css since if the user changes the size of the browser font for a visual need, the components will adjust their size in proportion to it.
In the first place, if it is correct to say that the units
em
take their reference from their parent element, then this is the main problem of using these units and it is that many times an unexpected result is obtained due to the cascade reactions , practically the unitsem
are based on inheritance.With rem this is solved.
Rem
means Root em and is based on the fact that just by declaring the base rem to html the following measures will not depend on the inheritance but on the base number. When specified on the root element property, the unitsrem
refer to the initial value of the propertyfont-size
, like this.The measure
62,5%
is a convention rather than something strict. There are still some more things to explain but this is the base, if you want more explanation let me know and I'll edit the answer.