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大小
posted @ 2022-08-10 14:24  暗中讨饭er  阅读(25)  评论(0)    收藏  举报