高度 (height) 和 行高 (line-height) 有什么区别?

htmlweb developmentfront end technology更新于 2025/12/1 17:48:17

高度 (height) 是容器的垂直测量值,例如 div 的高度。

行高 (line-height) 是一个 CSS 属性,用于指定行高,即从第一行文本顶部到第二行文本顶部的距离。它是两段文字行之间的间距。

示例

您可以尝试运行以下代码来了解高度 (height) 和行高 (line-height) 的区别:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .height {
            height: 20px;
         }

         .lheight {
            line-height: 15px;
         }

         .lheightbigger {
            line-height: 35px;
         }
      </style>
   </head>
   <body>
      <h2>Height</h2>
      <div class="height">
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
      </div>

      <h2>Line Height with less space</h2>
      <div class="lheight">
         This is demo text showing line height example. This is demo text showing line height example.
         This is demo text showing line height example. This is demo text showing line height example.
         This is demo text showing line height example.This is demo text showing line height example.
      </div>

      <h2>Normal Text</h2>
    <div>
      This is normal text.
      This is normal text.
      This is normal text.
    </div>

    <h2>Line Height with more space</h2>
    <div class="lheightbigger">
      This is normal text. This is normal text.This is normal text.
      This is normal text. This is normal text.This is normal text.
      This is normal text. This is normal text.This is normal text.
    </div>
</body>
</html>

相关文章


有用资源