CSS:line-height:150%与line-height:1.5的区别是什么？

最新推荐文章于 2023-11-10 15:25:27 发布

SharonLucky

最新推荐文章于 2023-11-10 15:25:27 发布

阅读量1.6k

点赞数 3

分类专栏： css 文章标签： web前端开发

本文链接：https://blog.csdn.net/qq_21577869/article/details/51027331

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接上一段实例代码，注释部分有相应代码的讲解。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>CSS:line-height:150%与line-height:1.5的区别是什么？</title>
</head>
<body>
<!--150%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。而1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。另，1.5em等也是按照150%的情况来算的。-->

<!--当line-height:150%的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，字元素的行高等于16px * 150% = 24px：-->
<div style="line-height:150%;font-size:16px;">
  父元素内容
  <div style="font-size:30px;">
    Web前端开发<br/>
    line-height行高问题
  </div>
</div>
<hr>
<!--当line-height:1.5em的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px：-->
<div style="line-height: 1.5em;;font-size:16px;">
  父元素内容
  <div style="font-size:30px;">
    Web前端开发<br/>
    line-height行高问题
  </div>
</div>
<hr>
<!--当line-height:1.5的效果，父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px：-->
<div style="line-height: 1.5;;font-size:16px;">
  父元素内容
  <div style="font-size:30px;">
    Web前端开发<br/>
    line-height行高问题
  </div>
</div>
</body>
</html>

下图是当line-height:150%的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，字元素的行高等于16px * 150% = 24px：

<img data-rawheight="75" data-rawwidth="277" src="https://pic2.zhimg.com/cd8d76c78e80e3183a1c241dfb39f2c5_b.jpg" class="content_image" width="277">

下图是当line-height:1.5em的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px：

<img data-rawheight="75" data-rawwidth="277" src="https://pic2.zhimg.com/cd8d76c78e80e3183a1c241dfb39f2c5_b.jpg" class="content_image" width="277">

下图是当line-height:1.5的效果，父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px：

<img data-rawheight="106" data-rawwidth="277" src="https://pic1.zhimg.com/1a56e5fabcf173ae074e0f4ed9e61e3c_b.jpg" class="content_image" width="277">

SharonLucky

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS:line-height:150%与line-height:1.5的区别是什么？

直接上一段实例代码，注释部分有相应代码的讲解。html>lang="en"> charset="UTF-8"> CSS:line-height:150%与line-height:1.5的区别是什么？是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。而1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。另，1.5em等也是按照150%的情况来算的。
复制链接

扫一扫