网站单页在线深圳网络优化公司
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的作用的体现，他是作用于每一行的，设置每一行的宽高。
