line-height的高度机理
Posted blogregisterboby
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了line-height的高度机理相关的知识，希望对你有一定的参考价值。
1.元素高度从何而来？是由里面的文字撑开的？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0;} .test1{font-size: 0;line-height: 36px;border: 1px solid red;background: gray;} .test2{font-size: 36px;line-height: 0;border: 1px solid red;background: gray;} </style> </head> <body> <div class="test1">测试</div> <br> <div class="test2">测试</div> <!-- 从效果图中可看出，元素高度是由line-height决定的 --> </body> </html>
2.如果行框盒子里面有多个不同高度的内联盒子？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> *{margin: 0;padding: 0;} .em{line-height: 80px;} </style> </head> <body> <div id="app"> 这是一行普通的文字，这里有个<em class="em">em</em>标签。 </div> <!-- 如果行框盒子里面有多个不同行高的内联盒子？ 原则上是由最高的那个内联盒子的高度决定的，但如vertical-align这样的属性可能会改变行框盒子高度 --> </body> </html>
以上是关于line-height的高度机理的主要内容，如果未能解决你的问题，请参考以下文章