Question:
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 the font of my paragraphs will be 24 pixels in size. But what about padding
and margin
? What if I used rem
to define for example line-height
, height
, max-width
and others?
What are the different styles measured in rem
?
Answer:
Quoting from the W3C documentation on the rem
drive:
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 .
rem unit
(Equals the computed value of 'font-size' in the root element.
When specified in the 'font-size' property of the root element, the 'rem' units refer to the property's initial value .)
Since the document's <html>
tag is the "root element" in question, the rem
unit is relative to the computed font-size
for that element.
When rem
is used to specify the font-size
of the "root element", rem
is relative to the initial value (or default value) of font-size
specified in the W3C: medium
.
I know the font of my paragraphs will be 24 pixels in size. But what about padding and margin? What if I used rem to define for example line-height, height, max-width and others?
Any property computed in rem
takes the computed size of the font-size
, so if the font-size
of the root element is 16px
, 1rem
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