我不知道的css line-height

(40) 2024-03-01 18:01:01

基线、底线、顶线与行高

我不知道的css line-height (https://mushiming.com/)  第1张
我不知道的css line-height (https://mushiming.com/)  第2张

 

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

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

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

  1. “内容区域”(content area),是一种围绕文字看不见的盒子,可理解为选中文字蓝色背景区域,如下图。“内容区域”的大小与 font-size 大小相关;
    我不知道的css line-height (https://mushiming.com/)  第3张

  2. “内联盒子”(inline-boxes),“内联盒子”不会让内容成块显示,而是排成一行。如果文字外部含 inline 水平的标签(如span,a,em等),则属于“内联盒子”,如下图紫框处。如果是光秃秃的文字,则属于“匿名内联盒子”,如下图红框处;
    我不知道的css line-height (https://mushiming.com/)  第4张

  3. “行框盒子”(line boxes),每一行就是一个“行框盒子”,每个“行框盒子”又是由一个一个“内联盒子”组成,“行框盒子”如下图红框处;
    我不知道的css line-height (https://mushiming.com/)  第5张

  4. 标签所在的“包含盒子”(containing box),如下图红框处。此盒子由一行一行的“行框盒子”组成
    我不知道的css line-height (https://mushiming.com/)  第6张

<!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> 

我不知道的css line-height (https://mushiming.com/)  第7张
当给em标签设置一个line-height时,外围的p元素会的高度也会变成50px;所以元素的高度并不是由文字撑开的,实际上是由 line-height 决定的。这时可能会提出疑问:line-height明明是两基线距离,单行文字哪来的行高呢?关于这个问题,我们需要了解的是:

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

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

  1. 内容区域高度只与字号以及字体有关,与 line-height 没有任何关系。
  2. 在simsun(宋体)字体下,内容区域高度等于文字大小值。

因此,在 simsun(宋体)字体下:

font-size + 行间距 = line-height

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

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

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

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

我不知道的css line-height (https://mushiming.com/)  第8张
行高决定内联盒子高度,但高度表现是由行间距和内容区域表现的;行间距墙头草,可大可小(甚至负值),它的作用就是保证内联盒子高度正好等于行高。

 

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> 

我不知道的css line-height (https://mushiming.com/)  第9张

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> 

我不知道的css line-height (https://mushiming.com/)  第10张
不难看出图片有一个间隙,对于一个block元素,后面就像有一个文本节点在里面一样,看不到,获取不到,称之为隐匿文本节点。内联块级元素img默认对齐方式是基线baseline,要与文本对齐,文本存在line-height,所以存在间隙。那么应该怎么去掉这个间隙呢?

  1. 图片块状化 ——无基线对齐
 img{ 
   
    display: block;
 }
  1. 图片底线对齐
 p{ 
         
     vertical-align: bottom;
  }
  1. 行高足够小——基线上移
 p{ 
         
     line-height: 0px;
  }
  1. 消除隐匿文本字体大小
 p{ 
         
     font-size: 0px;
  }
THE END

发表回复