CSS基础-14-行高

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>

发布于 2021-12-07 15:06