------ Original Message ------
From: "Karl DeSaulniers" <k...@designdrumm.com>
To: "CSS-Discuss Discuss" <css-d@lists.css-discuss.org>
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?
Actually, I believe ems are based on the prior font-size of the element
in which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a
span inside that div with font-size set to 120% then it will be 120% of
the body font-size.
However, if the div has a font-size of 110%, then the span would have a
font-size that is 120% of 110% the divs calculated font-size would be
of the body font-size.
Stay with me.. :)
Example 1:
<Body font-size = 16px
<div font-size = none set
<span font-size (120%) = 19.2px
Example2:
<Body font-size = 16px
<div font-size (110%) = 17.6px
<span font-size (120%) = 21.12px
Please someone correct me if I am wrong.
Well, your math is correct, but it shows that the calculated font size
is based on the span's parent font size which is the div.
Now if you had used a rem in your calculation this wouldn't have
occurred because the font size would have been base on the Root font
size; that's the definition of rem, a root-based em.
That's beauty of using rems, they are stable in that they're based on
the root font-size, but they are dynamic and relate to size changes of
objects and screens.
/* Example3: */
body {
font-size: 16px;
}
<div style= "font-size: 110%></div> /* = 17.6 px
*/
<span style= "font-size: 1.2rem></span> /* (1.2 * 16px) = 19.2 px
*/
Michael Rose
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
