首页 > 编程知识 正文

css行高和高度有什么区别,CSS行高属性

时间:2023-05-04 21:52:51 阅读:256602 作者:4963

CSS行高 line-height 一.网页中的文本

文本中的每一个字符都有一个不可见的框,这些框又被放在两条不可见的横线中(垂直居中),两条横线的距离就是行高,放个图片理解下

 

二.行高的设置方法 1.直接设置 p{ line-height: 100px;} 2.相对值

有两种相对值:都是相对于font-size而言

百分比

p{ font-size: 100px; line-height: 150%;}

line-height的值可计算 100px * 150%

倍数

p{ font-size: 100px; line-height: 1.5;}

line-height的值可计算 100px * 1.5

三.通过设置行高间接设置行间距

通过上面的学习可以知道,上下两行文本之间的间距等于line-height - font-size

通过这个公式,就可以算得行间距。

假如font-size: 20px,现在要设置10px的行间距,则可以得到行高为30px

四.通过设置行高可以使单行文本垂直居中

因为文本默认在行中垂直居中,所以将行高设置成父元素的高度,这样,单行文本就在父元素垂直居中的位置。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。