css3 – What is the relativity of the rem unit?

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

Post Views: 3
Scroll to Top