SOURCE

<div class="m-demo">
	<p>行高：line-height:40px;</p>
	<p class="p1">行高：line-height:3em;</p>
	<p class="p2">行高：line-height:300%;</p>
	<p class="p3">行高：line-height:3;</p>
</div>
<div class="m-demo2">
	<p>行高：line-height:300%;</p>
	<p class="p1">字体大小：font-size:16px;先计算再继承：300%*30px = 90px，先计算出了90px这个结果值，再继承这个值</p>
</div>
<div class="m-demo3">
	<p>行高：line-height:3;</p>
	<p class="p1">字体大小：font-size:16px;先继承再计算：先继承了行高的值：3，再计算结果3*16px = 48px</p>
</div>

p{margin:10px;background:#ddd;}
p+p{margin-left:40px;}

body{font-size:30px;}

.m-demo{line-height:40px;}
.m-demo p{background:#ddd;}
.m-demo .p1{line-height:3em;}
.m-demo .p2{line-height:300%;}
.m-demo .p3{line-height:3;}

.m-demo2{line-height:300%;}
.m-demo2 p{background:#fbb;}
.m-demo2 .p1{font-size:16px;}

.m-demo3{line-height:3;}
.m-demo3 p{background:#0dd;}
.m-demo3 .p1{font-size:16px;}