一个不起眼的属性，却包含着许多不为人知的秘密。。。
一. 引出问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline</title>
<style>
span{
background:red;
}
.c1{
line-height: 20px;
}
.c2{
line-height: 8px;
}
.c3{
line-height: 30px;
}
.c5{
line-height: 28px;
}
</style>
</head>
<body>
<div>
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
inline box
<span class="c5">inline box</span>
</div>
</body>
</html>
效果如下：
我们发现：行高不同，但是渲染的高度是一样的，这是为什么呢？
二. 分析原因
行高的构成：
- 每一段文本叫做inline box，有标签包裹它的叫做带标签的inline box，没有的叫匿名的inline box.
- line box 由各个inline box 组成 。
- line box 的高度由inline box 中最高的组成。
- line-height由最高的inline box 的高度撑起来。
总结：
- 行高是由line box决定的。
- line box 是由inline box组成的
- inline box 的高度会决定行高的高度。
字体背景色：
- 背景区域由字体大小决定的(字体的top和bottom区间)
- 底线和顶线是文本占据的区域， 字体对齐默认是基线对齐。
三. 实例
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span>
</div>
运行效果：
分析：span上字体大小为20px，而line-height 为60px，明显60px比20px大，那么大的话多余部分均匀分布到两侧。
进一步思考：
平常我们在一个div中写文字居中一般这样写：
#div1 {
width: 300px;
height:100px;
line-hieght: 100px;
}
其实本质上能够居中的原因还是line-height起的作用，只不过把height和line-height设置为同等高，让他俩吻合而已。。
四. 补充小知识：
- 文字对齐可以通过vertical-align来调整，默认是基于基线调整。
- 经典的3px空白问题：
图片下面有空白(空白大小视字体大小而定)。例如字体大小为12px,则空白为3px。因为图片为inline元素，遵守行高的构成，默认对齐方式为基线，所以底部会有空白空隙。
解决方案：使用底部对齐。 vertical-align: bottom;
<div style="background:red">
<span>文字</span>
<img src="test.png"/>
</div>
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
