CSS：line-height繼承時的坑

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

2. 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

3. 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