line-height行高

最新推荐文章于 2022-09-02 11:21:25 发布

Q _Q

最新推荐文章于 2022-09-02 11:21:25 发布

阅读量571

点赞数

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124547711

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

line-height行高

作用：控制一行的上下间距

属性名：line-height

取值：

1 数字+px

2 倍数(当前标签font-size的倍数)

应用：

1 让单行文本垂直居中可以设置line-height：文字父标签高度

2 网页精准布局时，会设置line-height：可以取消上下间距

行高与font连写的注意点：

1 如果同时设置了行高和font连写，注意覆盖问题

2 font:style weight size/line-height family

例题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .line_height {
            /* 20px 宋体 倾斜 加粗 行高2倍 */
            font: italic bold 20px/1.5 宋体;
        }
    </style>
</head>

<body>
    <p>掘金资讯新的运营活动已经上线一周了，活动上线之后得到了资讯创作者们的积极参与，但是在运营过程中，我们也发现大家对于这个活动的一些细节还存有疑问。因此，特地撰写了这篇指南，希望能够解决大家的疑惑。</p>
    <p class="line_height">掘金资讯新的运营活动已经上线一周了，活动上线之后得到了资讯创作者们的积极参与，但是在运营过程中，我们也发现大家对于这个活动的一些细节还存有疑问。因此，特地撰写了这篇指南，希望能够解决大家的疑惑。</p>

</body>

</html>

效果图：