CSS: Pit in line-height inheritance

Three cases of line-height inheritance

1. line-height=20px

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

At this time, the line-height=20px of the p tag inherits the line-height=20px of the body

2. line-hieght=1.5

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

   At this time, the line-height=1.5 of the p tag and the line-height=1.5 of the body are inherited. Then the line-height=16px * 1.5 = 24px of the p tag

3. line-hieght=200%

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

   At this time, the line-height=60px of the p tag, first calculate the line-height=200% = 200% * 30px = 60px of the body. Then the p tag inherits the body's line-height=60px