On the value of line height

The values of row height are ：
1.px, Pixel values ;
2. Numbers ;
3.em;
4. percentage

The key here is to explain that the parent element is set to ’rem’ and ’ Numbers ’ The effect of on offspring elements

  <style>
        .container {
    
            /*  The line height is twice the font size  */
            /*  First calculate the pixel value , The child elements inherit  */
            line-height: 2em; 
        }
        .p1{
    
            font-size: 40px;
        }

        .p2{
    
            font-size: 12px;
        }
    </style>
 <div class="container">
        <p class="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat impedit suscipit, amet inventore necessitatibus pariatur iste quisquam laborum hic aperiam ab.
        </p>
        <p class="p2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit repellat debitis esse praesentium odio provident ex totam, delectus expedita.
        </p>
    </div>

The effect is as follows ：

Here's why ：div Of line-height yes 2em, It means the same font size 2 times .font-size Inherit browser default font-size, by 16px, be div Of line-height by 16px, Subelement p1 and p2 Of line-height Are all 32px. We can see in the browser ：
p1 Of ：

p2 Of :

 .container {
    

            /*  The line height is twice the font size  */
            /*  Child elements inherit first , Calculate again  */
            line-height: 2;
        }
        .p1{
    
            font-size: 40px;
        }

        .p2{
    
            font-size: 12px;
        }
    </style>
    <div class="container">
        <p class="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat impedit suscipit, amet inventore necessitatibus pariatur iste quisquam laborum hic aperiam ab.
        </p>
        <p class="p2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit repellat debitis esse praesentium odio provident ex totam, delectus expedita.
        </p>
    </div>

The explanation is as follows ：
div Of line-height by 2, Then its child elements inherit 2, Then each according to their font-size Calculate , be p1 Of line-heigh by 40px2=80px, be p2 Of line-heigh by 12px2=24px.

The following is displayed in the console ：


notes ： For the parent element itself ,line-height Are all 32px, In actual development, there will be more scenes of directly writing numbers . Because of the child element font-size It's different