我不知道的css line-height

最新推荐文章于 2024-04-26 16:58:59 发布

qq_21439711

最新推荐文章于 2024-04-26 16:58:59 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/qq_21439711/article/details/110678931

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基线、底线、顶线与行高

在这里插入图片描述

line-height撑开了块元素的高度

  <p>这是一段文字，这里有个<em>em</em> 标签。</p>

如上面一段普普通通的代码，却包含了4种盒子：

“内容区域”（content area），是一种围绕文字看不见的盒子,可理解为选中文字蓝色背景区域，如下图。“内容区域”的大小与 font-size 大小相关；
“内联盒子”（inline-boxes），“内联盒子”不会让内容成块显示，而是排成一行。如果文字外部含 inline 水平的标签（如span，a，em等），则属于“内联盒子”，如下图紫框处。如果是光秃秃的文字，则属于“匿名内联盒子”，如下图红框处；
“行框盒子”（line boxes），每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成，“行框盒子”如下图红框处；
标签所在的“包含盒子”（containing box），如下图红框处。此盒子由一行一行的“行框盒子”组成

<!DOCTYPE html>
<head>
    <style>
       em{
           line-height:50px;
       }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <p>这是一段文字，这里有个<em>em</em> 标签。</p>
</html>

在这里插入图片描述
当给em标签设置一个line-height时，外围的p元素会的高度也会变成50px；所以元素的高度并不是由文字撑开的，实际上是由 line-height 决定的。这时可能会提出疑问：line-height明明是两基线距离，单行文字哪来的行高呢？关于这个问题，我们需要了解的是：

行高由于其继承性，影响无处不在，即使单行文本也不例外。
行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。

而内容区域 + 行间距 = 行高，正好高度表现等于行高，给人感觉上是行高起了作用。

内容区域高度只与字号以及字体有关，与 line-height 没有任何关系。
在simsun（宋体）字体下，内容区域高度等于文字大小值。

因此，在 simsun（宋体）字体下：

font-size + 行间距 = line-height

那行间距的就可以这样计算了：

font-size: 240px;
line-height: 360px;
则行间距 = 360px - 240px = 120px;

行间距上下拆分，就有了“半行间距”

半行间距 = (行高 - 内容区域高度)/2

在这里插入图片描述
行高决定内联盒子高度，但高度表现是由行间距和内容区域表现的；行间距墙头草，可大可小（甚至负值），它的作用就是保证内联盒子高度正好等于行高。

line-height的水平垂直特性

<!DOCTYPE html>
<head>
    <style>
        p{
            border:1px solid red;
        }
       em{
           line-height:50px;
       }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <p>这是一段文字，这里有个<em>em</em> 标签。</p>
</html>

在这里插入图片描述

line-height与图片

<!DOCTYPE html>
<head>
    <style>
        p{
            border:1px solid red;
            background-color:yellowgreen;   
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <p><img src="1.png"></p>
</html>

在这里插入图片描述
不难看出图片有一个间隙，对于一个block元素，后面就像有一个文本节点在里面一样，看不到，获取不到,称之为隐匿文本节点。内联块级元素img默认对齐方式是基线baseline，要与文本对齐，文本存在line-height，所以存在间隙。那么应该怎么去掉这个间隙呢？

图片块状化 ——无基线对齐

 img{
    display: block;
 }

图片底线对齐

 p{      
     vertical-align: bottom;
  }

行高足够小——基线上移

 p{      
     line-height: 0px;
  }

 p{      
     font-size: 0px;
  }

qq_21439711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
我不知道的css line-height

基线、底线、顶线与行高 line-height撑开了块元素的高度 <p>这是一段文字，这里有个<em>em</em> 标签。</p>如上面一段普普通通的代码，却包含了4种盒子：“内容区域”（content area），是一种围绕文字看不见的盒子,可理解为选中文字蓝色背景区域，如下图。“内容区域”的大小与 font-size 大小相关；“内联盒子”（inline-boxes），“内联盒子”不会让内容成块显示，而是排成一行。
复制链接

扫一扫