啦咯ill图

根据CSS继承一说，咱们在“div#wrap”的内容容器中没有显式的设置字体大小，这样整个“div#wrap”将继承了其父元素“body”的字体——“16px”。
一、给段落设置样式：——“12px”的字体，“18px”的行高以及margin值
从CSS继承中，咱们能够得知咱们全部段落继承了其父元素“div#wrap”的“font-size:16px”。同时咱们经过前面的介绍得知1px = 1 ÷ 16 = 0.0625em，这样一来咱们就很轻松的知道“12px”等于多少个“em”
0.0625em × 12 = 0.750em
这样咱们就能够给段落p设置样式：字体

p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

要计算出段落所需的行高和“margin”为“18px”，来知足Richard Rutter说的basic leading，那咱们就须要像下面的方法和来计算：
18 ÷ 12 = 1.5em
使用所需的行高值“18px”直接除以“字体大小12px”，这样就获得了段落“p”的“line-height”值。在本例中行高就等于字体的“1.5”倍，接着咱们把“line-height”和“margin”样式加到段落“p”中code

p{
            font-size: 0.75em;/*0.625em × 12 = 0.750em */
            line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */
            margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */
        }

二、给标题设置一个18px的字号
标题“h1”和段落“p”同样的原理，他也是继承他父元素“div#wrap”的“16px”的“font-size”，因此咱们也是按一样的方法能够计处出他的“em”
0.0625em × 18 = 1.125em
咱们能够把得出的值写到CSS样式表中继承

h1 {
            font-size: 1.125em;/*0.625em × 18 = 1.125em*/
        }

一样为了保留Richard Rutter所说的vertical rhythm，咱们一样将标题“h1”的“line-height”和“margin”都设置为“18px”，使用方法前面介绍的方法。很容易获得他们的“em”值为“1em”:容器

h1 {
            font-size: 1.125em; /*0.625em × 18 = 1.125em*/
            line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */
            margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */
        }