admin 管理员组

文章数量: 887021

line

line-height是每一行文字的高(行高)，如果文章换行则整个盒子高度会增大（行数*行高）

height是一个固定值，就是这个盒子的高度。文章换行并不会改变盒子的高度。

注意点：

如果一个元素的height 和line-height相同，意味着这行文字在元素中垂直居中（仅限文字，且只能一行）。

当line-height = height 时，元素会垂直居中。

当line-height < height时，元素会偏上。

当line-height > height时，元素会偏下。

验证:height 时，换行不会改变盒子高度

<body><style>.box{width: 100px;background-color: #ccc;height: 50px;}</style><div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>

 

line-height时，换行会改变盒子高度：

<body><style>.box{width: 100px;background-color: #ccc;line-height: 50px;}</style><div class="box">ffffffffffsfafaafasdcvrgsvg<br>efgsbdtdrdvrsvdsrdsts<br>ggggggggggg</div>
</body>

 分析：增大后盒子高度变为了  行数3*行高50 = 150；

 

本文标签： line

版权声明：本文标题：line 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687030699h56743.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。