line-height行高

peakJun

已于 2023-04-28 22:42:00 修改

阅读量383

点赞数

文章标签： html css html5

于 2023-04-28 22:16:56 首次发布

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130436127

版权

1，可选值

（1）norma：由浏览器根据文字大小决定的一个默认值

（2）像素

（3）参考自身font-size的倍数（最常用）

（4）百分比：参考自身font-size的百分比

2，代码演示：

<style>
    #d1{
      font-size: 40px;
      background-color: skyblue;
      /* 第一种写法，值为像素 */
      /* line-height: 60px; */

      /* 第二种写法，值为normal */
      /* line-height: 60px; */

      /* 第三种写法，值为数值 */
      /* line-height: 1.5; */
      
      /* 第四种写法，值为百分比 */
      line-height: 150%;
    }
  </style>
</head>
<body>
  <div id="d1">djgkdjlggljaklhjk的结果kg接口接地开关将来看就的困境概况就打算六角恐龙好看观看l口接地开关将来看就的困境概况就打算六角恐龙好看观看口接地开关将来看就的困境概况就打算六角恐龙好看观看口接地开关将来看就的困境概况就打算六角恐龙好看观看口接地开关将来看就的困境概况就打算六角恐龙好看观看</div>
</body>

3，运行结果：

4，注意事项：

代码演示

<style>
    #d1{
      font-size: 40px;
      background-color: skyblue;
      /* 注意点1：行高过小会怎样？-文字重叠，且最小值是0，不能为负数 */
      line-height: 0px;
    }
    #d2{
      /* 行高的应用场景1：调整多行文字的间距 */
      font-size: 40px;
      background-color: pink;
      line-height: 1.5;
    }
    span{
      /* 注意点2：行高是可以继承的 */
      font-size: 50px;
      color: red;
    }
    #d3{
      font-size: 40px;
      background-color:skyblue;
      height: 150px;
      /* 行高的应用场景2：单行文字的垂直居中  */
      line-height: 150px;
    }
  </style>
</head>
<body>
  <!-- <div id="d1">djgkdjlggljaklhjk的结果kg接口接地开关将来看就的困境概况就打算六角恐龙好看观看l口接地开关将来看就的困境概况就打算六角恐龙好看观看口接地开关将来看就的困境概</div> -->
  <div id="d2">的结果kg接口接地开关将来看就的困境概况就打算<span>六角恐龙</span>好看观看l口接地开关将来看就的困境概况就打算六角恐龙好看观看口接地开关将来看就的困境概</div>
  <div id="d3">接口接地开关将来看就的困境概况就打算</div>
</body>