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 */}设置图片大小——使用em
要做出弹性布局样例这样的果，我们也需要在html中插入一张图片：
<body><div id="wrap"><h1>....</h1><p><img src="90.png" alt="" /> Lorem...</p></div></body>我们这张图片具有“90px”的宽和高，同时具有一个右边距和底边距为“18px”设置，而且还进行左浮动。下面我们就一起来看其如何实现图片这几个样式效果：
从HTML结构中，我们很清楚的知道，图片是段落“p”的子元素，通过前面的介绍，你们知道这个段落“p”的“font-size”值被得定义为“12px”，因此我们计算图片的属性值时，不能在按“1px = 0.0625em”或者“1em=16px”来计算，我们需要使用最老的公式计算：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
这样一来，按上面所示的公式，我们就可以计算出图片的大小：
1 ÷ 12 × 90 = 7.5em
现在你就可以将计算出来的值写到样式中去：
p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */}我们在段落中知道了“18px”刚好是“1em”，现在我们也把他使用到图片的样式中：
p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */margin: 0 1.5em 1.5em 0;float: left;}这样我们就制作出一个和弹性布局样例一样的效果。希望通过这样的一个实例能帮助大家了解如何使用“em”来创建一个弹性布局的方法。当然大家可能还在担心使用“em”来制作一个弹性布局，不能像“px”一样的的精确，如果你真正理解了这篇教程后，我想你不会在有这样的想法。
