1
Reading about, I saw places saying that measures In and Rem use the tag html as other reference saying it is the tag body, but what really is the tag that is used as reference?
1 answer
2
The rem is based on the html, if the document is an HTML
According to the W3C:
rem Unit: Equal to the computed value of font-size on the root element.
Meaning:
unit rem: Equal to the computed value of the root element font size.
And according to the MDN:
rem: This Unit represents the font-size of the root element (e.g. the font-size of the element).
That is to say,
rem: This unit represents the font size of the root element (for example, the font size of the element )
To understand why HTML is mentioned in "for example", we have to remember that CSS can be used with other document types.
In the specific case of an HTML document, the root is precisely the <html>, which in turn contains the <head> and the <body>, and all other items. Being so, the "root of the document" is synonymous with the <html> in HTML documents, therefore rem based on the font size of the <html>.
The em is based on the value inherited by the source of the element
Still on the MDN link above, we have:
in: This Unit represents the calculated font-size of the element. If used on the font-size Property itself, it represents the inherited font-size of the element.
That is to say,
in: This unit represents the calculated size of the element source. If used in the font size itself, it is taken from its inherited size.
Simply put, what happens to the em basically is the following:
If you specify a font size as being 2em, it will be twice the size it would normally be, if it specified nothing. An example of using em is that (but not limited to this, the possibilities are much more than those):
.reais span {font-size:.6em}
.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}<div class="tamanho1 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho2 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho3 reais"><span>R$</span>29<span>,90</span></div>Note that in this case we use a em just to define the smaller source of R$ and cents. O em will always be of .6 from the main source, without having to worry about the line size.
On the other hand, if you specify the measure of an element with em, this measure will be relative to the source of the element itself. See em applied in the size of an icon, for example:
.icon {
background:url(http://lorempixel.com/200/200) no-repeat 0 0;
background-size:1em 1em;
padding-left:1.5em;
line-height:1em;
margin-bottom:5px;
}
.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}<div class="tamanho1 icon">Ícone ajustado</div>
<div class="tamanho2 icon">Ícone ajustado</div>
<div class="tamanho3 icon">Ícone ajustado</div>Note that in this case with a setting, the icon adjusts to the line size, accompanying the font. Why use em in its measurements, who determines the size of the icon is the source.
See also:
Why it is recommended to use the "em" unit instead of "px" for fonts?
Browser other questions tagged html browser pixels
You are not signed in. Login or sign up in order to post.
I found one of my doubts, you think it would be good for me to use the measures in or out of the sources, as other tag...
divis an example, the size of an image etc...– user45722
The right thing is to understand each one and use it where it is best. One thing is certain: it makes no sense to use them for everything, not for everything, not for everything. You can "mix" without problems, provided for the right purpose. An example: that price case I put up, the ideal is percentage or on, it is not advantage to use neither px there. On the other hand, a main header can be based on rem, after all, it is to accompany the whole page. But there is no general rule, the fundamental thing is to understand what each one serves. Which is better, it just depends on the goal that element will have in its design.
– Bacco