CSS基础-14-行高

最新推荐文章于 2024-07-19 23:54:44 发布

Keep learning（Poker）

最新推荐文章于 2024-07-19 23:54:44 发布

阅读量184

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_63562705/article/details/121769867

版权

本文介绍了CSS中的行高属性`line-height`，其主要作用是控制文本的上下行间距。值可以为数字加像素单位或者字体大小的倍数。在实际应用中，行高可用于实现单行文本垂直居中和精准布局时消除上下间距。同时，需要注意当行高与`font`属性连写时的覆盖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.1行高

★作用:控制一行的上下行间距

★属性名: line-height

★取值:

· 数字+px

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

★应用:

1.让单行文本垂直居中可以设置line-height :文字父元素高度

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

★行高与font连写的注意点:

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

· 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>
        p{
            /* line-height: 50px; */
            /* 自己字号的1.5倍 */
            line-height: 1.5;

            /* 66px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>
<body>
    <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</body>
</html>