4
I have the following style sheet:
html{
font-size: 16px;
margin: 40px;
padding: 32px;
}
p{
font-size: 1.5rem;
padding: 2rem;
margin: 1.8rem;
}
I know that the source of my paragraphs will be 24 pixels long. But what about the padding and to the margin?
And if I used rem to set for example line-height, height, max-width and others?
The various styles measured in rem?
4
Citing W3C documentation on the unit rem:
rem Unit
Equal to the computed value of ːfont-size' on the root element.
When specified on the ːfont-size' Property of the root element, the ːrem' Units refer to the Property’s initial value.
unit
(Equals the computed font-size value in the root element.
When specified in the font-size property of the root element, 'rem' units refer to the initial value of property.)
Being the tag <html> of the document the "root element" in question, the rem is related to font-size computed for this element.
When rem is used to specify the font-size of the "root element", the rem is relative to the initial value (or default value) of font-size specified in W3C: medium.
I know that the font of my paragraphs will be 24 pixels long. But what about the padding and margin? And if I used to define for example line-height, height, max-width and others?
Any property calculated in rem receives the computed size of the font-size, thus, if the font-size root element is from 16px, 1rem will represent 16px.
html {
font-size: 16px; /* 1rem = 16px */
margin: 40px;
padding: 32px;
}
p {
font-size: 1.5rem; /* 1.5rem * 16px = 24px */
padding: 2rem; /* 2rem * 16px = 32px */
margin: 1.8rem; /* 1.8rem * 16px = 28.8px */
}
Sources:
http://www.w3.org/TR/css3-values/#font-relative-lengths
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size
http://www.w3.org/wiki/CSS/Properties/font-size
1
REM units are relative to the size defined in the main element and not relative to the selector parent element where font-sizehas been defined.
The "in is a scalable drive used in web media. The value in is based on the width of the letter M uppercase. This value shall be equal to font-size defined on the page or browser pattern (probably 16px) if this has not been set anywhere.
Example #1:
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
If the default browser value for font-size is 16px, 62.5% of that is 10px, so 1in equals 10px. And because it is a scalable unit, 2.4em is 2.4x 10px (24px), as well as 1.4em is 14px.
One of the problems of using in with font sizes is its ripple effect, which forces the developer to stay forever setting rules on the child selectors to reset them back to 1em.
In addition, font sizing with in is composed. A list within a list does not have 14px but 20px[required context]. Enter one more level and the source measures 27px.
Example #2
<style>
body { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>
<p> 12px text </p>
<ul>
<li> 12px text
<ul>
<li> 9px text </li>
</ul>
</li>
</ul>
body { font-size: 100%; }
p, li { font-size: 0.75em; }
<p> 12px text </p>
<ul>
<li> 12px text
<ul>
<li> 9px text </li>
</ul>
</li>
</ul>These problems can be circumvented by declaring on any child element that it uses 1em, avoiding the unwanted cascade effect.
CSS3 now has the rem that prevents such behaviour.
REM is an acronym for Root IN. REM units allow you to define a main value in the HTML element and then use in the subsequent elements values relative to that main unit.
The unity rem is also scalable, but in relation to specific elements on the page, without affecting the other elements
Examples:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
All recent browsers support drives REM. For browsers that do not support it we have to use as fallback option in pixels (px):
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
In the second example (with HTML) change the setting to:
p, li
{
font-size: 12px;
font-size: 0.75rem;
}
Ensures that <li>: children remain with 12px.
body { font-size: 100%; }
p, li { font-size: 0.75rem; }
<p> 12px text </p>
<ul>
<li> 12px text
<ul>
<li> 12px text </li>
</ul>
</li>
</ul>A third example, a little differentiated and more extended, involving paddling.
In the first nested Divs group, the computed values are:
The first DIV receives the global value of 20px for all Divs (20px). Without a global value, the DIV does not have padding (see the console populated by JS attached to snippet).
From the second on the values become 2in, or 2x, the computed value of the previous element, respecting the box-model:
This demonstrates well the cumulative ripple effect I said.
In the second group of nested Divs, the first reports the same 20px and all the paddling computed nested divs report 32px.
But why if the padding of root in is already 32px and the "global" is 20px?
Because... it’s related... to font-size. Try changing the padding from the HTML selector to any value and you will see that, with the exception of the HTML selector itself, of course, all nested Divs continue to report the same 32px.
Now we change the value of font-size , say... 20px, for example.
The first DIV continues to report the 20px global and all other Divs report 40px, that is to say, 2in, or 2x, the 20px as defined in font-size.
Font #1: CSS-Stars
Font #2: Sitepoint
Doesn’t really answer the question.
How not? In addition to answering the question explains why this happens besides exemplifying the difference between REM and MS.
The focus of the question is to define other properties with rem and not the font-size. I didn’t talk about em.
You don’t understand. REM is the unit of measurement of a measurable value. I exemplified with font-size because it becomes more evident. It may even be that when applied to other properties have different behaviors, but if you expected another kind of answer, then explain your question better.
It’s well explained. Ali specifically asks about other properties. I even quoted that I already know the effect on font-size.
I added one more example involving paddling. I hope you now meet your expectations.
Browser other questions tagged css3
You are not signed in. Login or sign up in order to post.
More succinct than the other answer, but it does not contain the main answer. What about other properties? As for the
font-sizeI already know. As the question says.– Guill
remis a unit of measurement relative to the size of thefont-size, then the other properties that receive, say 1rem, receive 1 time the size of thefont-sizeof the standard element. If thefont-sizeof the root element were 16px, so 1rem = 16px, so,padding,line-heightand other properties would be with 16px.– Thomas
So put that in the body of the answer. =]
– Guill
Now it’s beautiful!
– Guill