0
点赞
收藏
分享

微信扫一扫

line-height的取值

七公子706 2022-02-26 阅读 64

行高的取值

line-height

  1. px, 像素值

  2. 无单位的数字

  3. em单位

  4. 百分比

重点说一下父元素设置为em和数字子资源的区别

        .container {
            /* 行高为字体大小的两倍 */
            /* 先计算像素值,再继承 */
            /* line-height: 2em;  */

            /* 行高为字体大小的两倍 */
            /* 先继承,再计算 */
            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>

</html>
举报

相关推荐

0 条评论