line-height 和 height的区别
作者：互联网
含义不同
- line-height是行高的意思，它决定了元素中文本内容的高度
- height则是定义元素自身的高度
height使用
<style>
ul{
width: 500px;
font-size: 20px;
background-color: red;
height: 50px;
}
li{
}
</style>
<body>
<ul>
<li>文本1</li>
</ul>
</body>
- 可以看到ul中红色框高度为height大小，文字高度为font-size大小
line-height使用
<style>
ul{
width: 500px;
font-size: 20px;
background-color: red;
line-height: 40px;
}
li{
}
</style>
<body>
<ul>
<li>文本1</li>
</ul>
</body>
- 可以看到ul中红色框高度为line-height大小，文字高度为line-height大小
height 和 line-height使用
<style>
ul{
width: 500px;
font-size: 20px;
background-color: red;
height: 50px;
}
li{
line-height: 40px;
}
</style>
<body>
<ul>
<li>文本1</li>
</ul>
</body>
- 可以看到ul中红色框高度为height大小，文字高度为line-height大小
height 和 line-height 和 font-size不同时候
<style>
ul{
width: 500px;
font-size: 50px;
background-color: red;
height: 30px;
}
li{
line-height: 40px;
}
</style>
<body>
<ul>
<li>文本1</li>
</ul>
</body>
- 可以看到ul中红色框高度为height大小，文字高度为line-height大小
标签：区别,高度,height,ul,line,font,size 来源： https://www.cnblogs.com/yk-oct2/p/16572301.html