标题和段落文字大小以及排版设计

** 标题和段落字体大小 **：本文我们讨论使用em来设置标题和段落字体大小，并且相关排版的设计

这一类的排版建议把标题设置为默认字体大小的1.125em，也即1.125倍，而正文字体为0.75em，line-height为相对正文字体大小的1.5em（注意不是相对默认字体16px设定，是相对正文字体大小设定），建议再设置标题块（如h1）和段落块（如p）的margin同为相对正文字体大小的1.5em。下面我们写出具体代码以及解释

假设默认字体大小为16px（事实也确实如此）

<div class="container">
    <h1>...</h1>
    <p>...</p>
</div>

/*基本css样式设置*/
html {
    font-size: 100%;/*为了兼容IE*/
}
body {
    font-size: 1em;
}

.container {
    width: 46.25em; /*740px/16px=46.25em*/
    margin: 1.5em auto
    border : 0.0625em solid #ccc /*1px/16px=0.0625em*/
}

给标题设置样式：“18px”的字体，“18px”的行高以及margin值

h1 {
    font-size: 1.125em /*先继承它的父元素的默认大小16px，然后换成：18px/16px=1.125em*/
    /*为了美观，建议加上行高和margin*/
    line-height: 1em;/*也是18px，但是它这里是相对于上面的font-size来说，因此是18px(line-height)÷18px(font-size)=1em*/
    margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */
}

---

给标题设置样式：“12px”的字体，“18px”的行高以及margin值

p {
    font-size: 0.75em /*先继承它的父元素的默认大小16px，然后换成：12px/16px=0.75em*/
    /*为了美观，建议加上行高和margin*/
    line-height: 1.5em;/*也是18px，但是它这里是相对于上面的font-size来说，因此是18px(line-height) ÷ 12(font-size) = 1.5em */
    margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ 
}