乐趣区

关于css:探究行高是个啥东西

行高介绍

(W3C)定义和用法

line-height 属性设置行间的间隔(行高)。

正文:不容许应用负值。

阐明

该属性会影响行框的布局。在利用到一个块级元素时,它定义了该元素 中基线之间的最小间隔 而不是最大间隔。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,别离加到一个文本行内容的顶部和底部。能够蕴含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子,后辈元素会继承这个缩放因子而不是计算值。

图示行高


由图所示,增加文本内容会造成行高,就是蕴含文本内容和相等的文本内容顶部半行距、底部半行距的一个区域, 这个区域是属于盒子内容局部。能够通过元素中基线之间间隔来定义。

话不多说,通过理解行高的作用来理解行高吧!

行高的次要作用

使文本文字垂直居中

如下案例:

1. 起始行高默认值,此时行高是默认值

    .line_height {
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
    }
    
  <div class="line_height">hello line-height</div>

运行后果:
(1)

(2)
结构图 此图为盒子结构图,蓝色为盒子内容区域,绿色为内边距,

由图可知文本内容绝对盒子高的 中线偏上

2. 当行低等于盒子内容大小时,即不含 padding 值和 border 值。

 .line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 200px;
    }

运行后果:

由图可知此时文本内容处于盒子内容的垂直居中,位于盒子高的 中线上, 实现了文本居中成果。

3. 当行高大于盒子内容大小时。

 .line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 250px;
    }

运行后果:

此时文本内容绝对盒子高的 中线偏下

4. 当行高小于盒子内容大小时

  .line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 100px;
    }

运行后果:

此时文本内容绝对于盒子高的 中线之上

退出移动版