line-height与height的区别

约定不等于承诺〃 2024-03-26 13:52 60阅读 0赞

## line-height与height的区别 ##

### 简介 ###

简介：本文讲解css面试过程中，一个常见的面试题，line-height与height的区别。

### 区别 ###

line-height:是每一行的文字的高，如果文字换行则整个盒子高度会增大（行数\*行高）

height:是一个死值，就是这个盒子的高度。

*  height代码演示

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
          
                margin: 0;
                padding: 0;
            }
            div{
          
                width: 200px;
                height: 50px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div>
            sdhaldhaisdhaiodhaiso<br />dhaisodhaioddsadsadawddahsaiodhsa<br />iodhasiodhsaiodhio
        </div>
    </body>
    <script>
    </script>
    </html>

这里可以看出来，这个height设置的一行的高度，  
![在这里插入图片描述][8e68be77a15e431da8505d6b5bdec5ce.png]  
我们现在把这个height从50px修改为500px，看看现在的效果怎么样。  
![在这里插入图片描述][ad4318019951472b83fc37090261f0a7.png]  
我们可以看到，这个框线更大了，变成了500px，这个就表明了，这个height的值，就是事设置的这个盒子的高度。  
![在这里插入图片描述][da23ed77683e4f2d8938d3f0a51326c5.png]

*  line-height

这里是演示这个line-height的效果。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
          
                margin: 0;
                padding: 0;
            }
            div{
          
                width: 200px;
                line-height: 50px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div>
            sdhaldhaisdhaiodhaiso<br />dhaisodhaioddsadsadawddahsaiodhsa<br />iodhasiodhsaiodhio
        </div>
    </body>
    <script>
    </script>
    </html>

**演示效果**  
从这个效果可以看出来，这个行与行之间的间隙更大了，这就是line-height的作用的体现，他是作用于每一行的，设置每一行的宽高。  
![在这里插入图片描述][937eec8ed8c04159a5812516cfd15077.png]

[8e68be77a15e431da8505d6b5bdec5ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/af7af719a6d64878bcc9c6de25ebecc8.png
[ad4318019951472b83fc37090261f0a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fc1164519c7841d18bf5496f1fce6009.png
[da23ed77683e4f2d8938d3f0a51326c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/edd9d4053f1c457a91fa26d0891dec2b.png
[937eec8ed8c04159a5812516cfd15077.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/80f9c2504d8a400bb2c73fb83efe93c0.png