关于css:CSSlineheight继承时的坑

line-height继承的三种状况

  1. line-height=20px
body {
  line-height: 20px;
  font-size: 30px;
}
p {
  font-size: 16px;
}

这时候p标签的line-height=20px,继承body的line-height=20px

  1. line-hieght=1.5

    body {
      line-height: 1.5;
      font-size: 30px;
    }
    p {
      font-size: 16px;
    }

    这时候p标签的line-height=1.5,继承body的line-height=1.5。则p标签的line-height=16px * 1.5 = 24px

  2. line-hieght=200%

    body {
      line-height: 200%;
      font-size: 30px;
    }
    p {
      font-size: 16px;
    }

    这时候p标签的line-height=60px,先计算body的line-height=200% = 200% * 30px = 60px。再p标签继承body的line-height=60px

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理