关于line-height设置的问题_line-height 100%-CSDN博客

本文链接：https://blog.csdn.net/qq_44812835/article/details/108471279

本文探讨了CSS中line-height属性的使用，包括它可以继承、带单位的值、纯数字和百分比设置的方式。强调了纯数字和百分比在设置行高时与父元素的关系，解释了为何设置子元素行高为100%可能不达预期效果的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、介绍

在平时做项目的时候，因为盒子高度使用的百分比，就想尝试行高也设置为100%，来实现这个垂直居中，但是效果并不会想我们想象的这样，今天就来重新认识一下行高
line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
行高也是可以撑开容器高度的，当元素没有定义 height 属性时，元素表现的高度是由 line-height 决定的
我们一般常常用来把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
经过简单的介绍，我们来具体看看如何设置 line-height

2、首先行高是个可以继承的属性，一般有三种

//1、可以使用带单位的值比如px、em等
//2、可以使用纯数字
//3、还可以使用百分比

1、带单位的值比如px、em等

1、用带单位的值px为例 
  具体带单位的值可以单独给子元素设置，也可以继承父元素的值
<div class="box">
   <div class="a">
    ABCDE
   </div>
   <div class="b">
    ABCDE
   </div>
</div>
<style>
   .box{}
   .a{
    background-color: aquamarine;
    line-height: 50px;
   }
   .b{
    background-color: cornflowerblue;
    line-height: 30px;
   }
</style>

效果：
在这里插入图片描述

2、用纯数字，这里我们要注意一下，纯数字一般用来给父元素设置，然后子元素具体行高是根据父元素设置的值乘以子元素自己的`font-size`的值，只给子元素设置是没有效果的

结构不变
.box{
    line-height: 2;
   }
   .a{
    background-color: aquamarine;
    font-size: 15px; //line-height =2*15 = 30px
   }
   .b{
    background-color: cornflowerblue;
    font-size: 20px; //line-height =2*20 = 40px
 }

效果
在这里插入图片描述

3、使用百分比，百分比也是给父元素设置，但是不同于纯数字的是，子元素的行高是根据父元素的font-size 乘以父元素设置的百分比（这也是为什么我给子元素设置100%，没有达到我预期的原因）

.box{
    line-height: 200%;
    font-size: 20px;
   }
   .a{
    background-color: aquamarine;
    font-size: 12px;//行高=20*200% = 40px;
   }
   .b{
    background-color: cornflowerblue;
    font-size: 12px;//行高=20*200% = 40px;
   }