line-height与height的区别

简介: line-height与height的区别

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>

演示效果

从这个效果可以看出来,这个行与行之间的间隙更大了,这就是line-height的作用的体现,他是作用于每一行的,设置每一行的宽高。

相关文章
|
6月前
究竟什么时候使用line-height合适------line-height的实际应用
1) 单行文字的垂直居中对齐 把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,把line-height设置为您需要的box的大小可以实现单行文字的垂直居中,height是多余的。
20 0
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
56 0
html+css实战94-内容width和height
html+css实战94-内容width和height
78 0
html+css实战94-内容width和height
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
405 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
|
JavaScript 前端开发