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的作用的体现，他是作用于每一行的，设置每一行的宽高。
