啦咯ill图

根据CSS继承一说，我们在“div#wrap”的内容容器中没有显式的设置字体大小，这样整个“div#wrap”将继承了其父元素“body”的字体——“16px”。
1、给段落设置样式：——“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”中

        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 */
        }
    

2、给标题设置一个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 */
        }