版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chelen_jak/article/details/84336985
之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览器的默认值（一般为16px，可以理解为父元素继承所得的font-size），但是这种理解是片面的。
例如：
<div id="parent" style="font-size: 16px;">
<div id="child" style="font-size: 1.25em; line-height: 1.5em;" >Ok</div>
</div> 
上图中parent的font-size = 16px , 那么child元素font-size=16px * 1.25=20px，这个容易理解。如此类推line-heigth: 1.5em应为16px * 1.5 = 24px, 但它的值却是30px, 这是为什么呢？
原来元素自身上其他的属性（font-size除外），值如“boder、width、height、padding、margin、line-height”等的em参考值是元素自身font-size而不是父组的font-size, 所以Child的line-height=16px * 1.25 * 1.5 = 30px；
结论：
1、字体计算公式
1em = 父元素的font-size
像素值 ÷ 父元素的font-size = em值
2、其它属性的计算公式
1em = 元素自身的font-size
像素值 ÷ 元素自身的font-size = em值
可参考：《关于css中em和百分数的区别》 的最佳答案