html – What reference measure does the CSS rem unit use?

Question:

In CSS there are two types of relative measures: em and rem . The first is a so much for one that takes as reference the size of the parent element. In the second case, we have the same for one. Now, this does not refer to the parent element, but, from what I have read, to the root element.

Investigating, I have also read that by "root element" they refer to the original or standard style of HTML tags for the specific element on which we are working.

But it does not add up to me and I 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?

Answer:

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 a 62.5 which makes: 1rem = 10px

And then it is an easy measure to remember and use.

It is recommended to use rem as the unit of measurement in the css since if the user changes the measurement of the browser font due to a visual need, the components will adjust their size in proportion to this.

Scroll to Top