line-height 行高

Posted 2020-06-09

行高：两条文字基线之间的距离，基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。

 

如果设为数字的话，表示行高为当前font-size的倍数，默认1.14，不用带单位也可以

如果是把它设为和高度一致的单位，例如30px，那么可以实现垂直居中

如果是百分比，那么是相对于当前font-size而言的

 

没有设置高，或高为百分比的情况下，输入内容，撑开元素的line-height，而不是文字

div{ background:blue; font-size:10px; line-height:0px; }   

那么这个div 高度为0

 

line-height 水平垂直特性（就是文字处于盒子的垂直中间）

1、单行的话把行高设置成需要的高度即可

2、多行文字垂直居中

.multi{line-height:150px; border:1px solid red; padding-left:5px;}
.multi span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.multi i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

<p class="multi">
          <span style="font-size:12px;">aaaaaaaaaaaaaaaaaaaaa<br>bbbbbbbbbbbbbbbbbbbb</span><i>&nbsp;</i>

</p>

 

http://www.zhangxinxu.com/wordpress/?p=384

 

 

"x-height"就是指的小写字母‘x‘的高度；术语描述就是基线和等分线[mean line](也称作中线[midline])之间的距离。

CSS中有些属性值的定义就和这个"x-height"的有关，最典型的代表就是：vertical-align: middle，而相对于字符x的中心位置对齐