1.基本概念
类似于之前小学写字学习的四线三格,分为顶线(top)、中线(middle)、基线(baseline)、底线(bottom)。
(1)行高是指文本行基线间的垂直距离。
(2)行距是上一行的底线和下一行的顶线之间的距离。
行距的一半就是半行距。上间距等于下间距。
(3)字体大小是同一行的顶线和底线之间的距离。
从图中可以看出:
行高=行间距+字体大小=上半行距+字体大小+下半行距
2.font-size和line-height的关系
HTML结构:
<div>美丽的中国<br />
中国很美丽
</div>
(1)当font-size等于line-height时,即行间距为0;
div{
text-align:center;
background:pink;
font-size:30px;
line-height:30px;
}
效果如图:
(2)当font-size大于line-height时,即行间距为负值,文字会杂糅在一起。
div{
text-align:center;
background:pink;
font-size:50px;
line-height:30px;
}
效果如图所示:字体变大,元素高度不变。
(3)当font-size小于line-height时,行间距大于0,上下文字之间有间距。
div{
text-align:center;
background:pink;
font-size:15px;
line-height:30px;
}
效果如图所示:
3 line-height和height的关系
CSS中起高度作用的应该就是height以及line-height。height是用来设置标签元素的高度。
以一个div为例,来进一步讨论两个问题:
第一个问题:如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值。下面采用代码进行说明:
<div class="demo">测试</div>
(1)字体大小值部位0,行高为0;
.demo{
text-align:center;
border:1px solid blue;
background:pink;
line-height:0px;
font-size:20px;
}
效果:
增加字体大小,只有字体大小变,元素撑不起高度,不显示。
(2)行高一定,字体大小为1;(给0就不能体现字的存在)
.demo{
text-align:center;
border:1px solid blue;
background:pink;
line-height:40px;
font-size:1px;
}
效果如图:
增大字体大小,元素不改变。增加行高数值大小,元素高度增加。说明在未设置元素高度时,设置行高会撑起父级的高度,且文字垂直居中。
第二问题:div的height与line-height的大小关系不同时,会有什么显示结果呢?
<div class="demo">测试</div>
(1)当height=line-height时:
.demo{
text-align:center;
background:red;
font-size:18px;
width:300px;
height:100px;
line-height:100px;
}
效果如图:
(2)当height<line-height时:
.demo{
text-align:center;
background:red;
font-size:18px;
width:300px;
height:70px;
line-height:100px;
}
效果如图:
(3)当height>line-height时:
.demo{
text-align:center;
background:red;
font-size:18px;
width:300px;
height:140px;
line-height:100px;
}
效果如图所示:
总结:在给定元素高度时,高度等于行高,文字会垂直居中。当行高值减小时,字体会向上运动。当行高值增大时,字体会向下运动。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35192.html