当前位置：网站首页>Value of line height

Value of line height

2022-06-13 03:50:00 【_ Virgo programmer's daily life】

The value of row height

line-height

  1. px, Pixel values

  2. Numbers without units

  3. em Company

  4. percentage

Focus on setting the parent element to em Influence of and numbers on child elements 

        .container {
    
            /*  The line height is twice the font size  */
            /*  First calculate the pixel value , Re inheritance  */
            line-height: 2em; 

        }
        .p1{
    
            font-size: 40px;
        }

        .p2{
    
            font-size: 12px;
        }
    </style>


<body>
    <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>
</body>

explain ： Here, the parent element line-height by 2em, The line height is twice the font size , Oneself font-size Inherits the browser default size 16px,line-height by 2 times , Then for 32px, Subelement p1,p2 All inherited div Of line-heigh by 32px;
Insert picture description here 

 .container {
    
           
            /*  The line height is twice the font size  */
            /*  Inherit first , Calculate again  */
            line-height: 2; 

        }
        .p1{
    
            font-size: 40px;
        }

        .p2{
    
            font-size: 12px;
        }
    </style>
</head>

<body>
    <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>
</body>

Insert picture description here
explain ：
div Of line-height by 2,p1 and p2 All inherited , Then calculate according to their own size , Respectively ：40 * 2=80px,12 * 2=24px.
notes ： In development, we often set the row height as a number , In both cases, the parent element div Self line-height Are all 32px

原网站

版权声明
本文为[_ Virgo programmer's daily life]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202280527093059.html

边栏推荐

猜你喜欢

随机推荐