line-height与height的区别

极客李华

于 2023-02-25 00:21:30 发布

阅读量318

点赞数

分类专栏： HTML面试与笔试题文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_51447496/article/details/129210258

版权

HTML面试与笔试题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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设置的一行的高度，
在这里插入图片描述
我们现在把这个height从50px修改为500px，看看现在的效果怎么样。

我们可以看到，这个框线更大了，变成了500px，这个就表明了，这个height的值，就是事设置的这个盒子的高度。

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>