line-height

- 1. 行距与半行距
- 2. 半行距与精确的布局
- 3. 为什么line-height可以让内联元素“垂直居中”？
- 4. 使用line-height实现多行文本"垂直居中"
- 5. 关于line-height的各类属性值
- - 5.1 normal
  - 5.2 数值，百分比，长度值
- 6. line-height无法精确控制行框盒子的高
- 7. 总结
- 8. 面试题：display:inline-block；作用于块级元素与作用于内联元素有什么区别？
参考资料

本文大部分内容摘自张鑫旭的《CSS世界》，外加一些自己的理解。在此仅作学习记录，无商业用途。

1. 行距与半行距

“行距”分散再当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。

行距 = line-linght - font-size

2. 半行距与精确的布局

在查看设计图的时候，我们经常可以看到某段文字的下方与某个元素的距离。这时候的距离往往是不包含半行距的，而我们使用padding或者margin直接设置设计图上的尺寸是不准确的。
如果需要做到精确的话。我们需要将标准值减去半行距。假设line-height: 1.5; font-size: 14px; 则：

标准值 - （14 * （1.5 - 1）） / 2

（当line-height: 1;时line-height == font-size的文字高度）
上述公式得出的结果即精确的距离值。
但是由于CSS属性并没有小数像素的概念。因此如果时文字的上边距，则向下取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的。而上述得出的结果是3.5px，我们向上取整是4px。

3. 为什么line-height可以让内联元素“垂直居中”？

行高可以实现“垂直居中”原因在于CSS中“行距的上下等分机制”，如果行距的添加规则是文字的上方或者下方，则行高是无法让文字垂直居中的。

4. 使用line-height实现多行文本"垂直居中"

<style type="text/css">.box{line-height: 120px;background-color: #f0f3f9;}.content {display: inline-block;line-height: 20px;margin: 0 20px;vertical-align: middle;}
</style><div class="box"><div class="content">螺丝钉解放是开了房间两款手机发了多少积分</div>
</div>

这里实现的是近似垂直居中。适当缩小屏幕可以看到多行垂直居中的效果。由于这里的垂直居中时使用line-height:120px;实现的，如果所以文字不能太多，不然无法实现垂直居中。

屏幕变小文字变成多行的时候，多行的文字及一个整体，这个整体的基线与x字母对齐，因此文字会偏上，使用vertical-align: middle;让这个整体的"中部"（这个表述可能不是很准确）与x字母的基线对齐，就实现了近似居中对齐。

5. 关于line-height的各类属性值

5.1 normal

line-height: normal; 与font-family相关，不同字体解析出来的line-height值可能会不同。

5.2 数值，百分比，长度值

line-height: 2;父级使用数值时，子元素继承的也是相同的数值。

line-height: 50%; 父级使用百分比时，子元素继承的子元素的【font-size * 50%】后的到的数值。

line-height: 21px;父级使用长度值时，子元素继承的也是相同的长度值。如果是line-height: 2em;那么子元素继承的情况和百分比值的计算方式相同。

6. line-height无法精确控制行框盒子的高

<style type="text/css">
body,html{margin: 0;padding: 0;
}
.box{background-color: red;line-height: 32px;
}
.box > span {font-size: 24px;
}
</style><div class="box">x<span>文字</span>
</div>

上面.box明明设置了line-height:32px;而实际上的高度却超出了。这是因为：font-size:24px;是设置在元素上的，这就导致了外部<div>元素的字体大小和<span>元素由较大出入。
对于字符而言，font-size越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度。

解决办法：

让内外的字体大小一致。设置<div>的字体大小也为24px;

改变对齐的方式。设置<span>元素的对齐方式为：vertical-align: top;

7. 总结

line-height的作用点是”幽灵空白节点“。

”幽灵空白节点“存在于行框盒子的前面。

如何形成行框盒子：
1）块级元素 > 内联元素(非空)
2）display:inline-block;

line-height垂直居中，利用的是CSS中“行距的上下等分机制”。

line-height: normal; 与font-family有关。

line-height: 2;的继承是直接继承；line-height: 50%; line-height: 2em;的继承是根据子元素的font-size计算后的值，进行继承。

非替换元素的内联元素的高度由line-height决定，而不由font-size决定。

8. 面试题：display:inline-block；作用于块级元素与作用于内联元素有什么区别？

作用于块级元素：
<div> <div style="display:inline-block;"></div>  
</div>
使块级元素可以多个并排。

让块级元素形成一个行框盒子，并拥有”幽灵空白节点“，使父级元素的高度增加，子元素高度不变。

让父级元素上使用line-height可以生效。

作用于内联元素元素：
<div> <span style="display:inline-block;"></span>  
</div>
这里内联元素要区分非替换内联元素与替换内联元素：

非替换内联元素

使内联元素可以设置宽高。

使内联元素形成一个独立的行框盒子，line-height的值等于内联元素的高。(图中共有两个行框盒子，它们的前面各有一个”幽灵空白节点“)

替换内联元素

对于像<img>、<iframe>、<object>、<video>这种有宽高属性或者是像<audio>这种有设置默认宽高值(width:xx;height:xx;)的内联元素，设置display:inline-block;后，line-height也不能决定它们的高度。

对于<input>和<textarea>不论是否设置display:inline-block;，line-height可以改变它们的高度。

参考资料

《css世界》张鑫旭 ——5.2 内联元素的基石 line-height

真正的能理解CSS中的line-height，height与line-height

《CSS世界》读书笔记：line-height相关推荐

《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐写在前面在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐
效果图 HTML <p>请选择<i class="icon-arrow"></i></p> <p>请选择<i cl ...
学习《css世界》笔记之loading三点动画效果
动画实例 HTML <div>正在加载中<span>...</span></div> CSS span {display: inline-block;h ...
《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
《精彩绝伦的CSS》读书笔记（二）
3.2 大多数允许使用多个关键字的CSS属性都允许以任何顺序书写关键字,但font属性是很少见的例外之一. font: <font-size> <font-family>;这连 ...
学习《css世界》笔记之使用overflow做文字溢出点点点效果
效果图 HTML <p class="p1">qwertyuiopasdfghjklzxcvbnm</p><div class="d1&qu ...
学习《css世界》笔记之多行文本实现垂直居中
效果图 HTML <div class="box"><div class="content">具有行高实现的多行文字垂直居中效果,需要属 ...
学习《css世界》笔记之content自动添加开启闭合符号
实例 HTML <p lang="zh"><q>啦啦德玛西亚</q></p><p lang="en"> ...

《CSS世界》读书笔记：line-height