关于em的问题?

body {
    font-size: 20px;
    line-height: 2;
}

.em {
    font-size: 2em;
    background: #ccc;
}

上面的那个line-height最后应该是多少呢?
我不太清楚:
.em继承了body的line-height属性,是继承了2这个值呢?还是继承了计算后的40px呢?

阅读 2.7k
3 个回答

.em 的line-height继承2值,所以body的line-height事40px,而.em是80px

是继承了2这个属性,也就是计算后的2 * 20 = 40px,你可以从开发者工具里查询到:
clipboard.png

元素本身没有设置font-size的时候, 是根据父元素的font-size走, 如果元素本身设置font-size时, em是根据元素自身的font-size大小来计算.
line-height的值:

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题