CSS中的line-height行高属性学习教程

2024-07-11 08:25:43

字体：大中小

来源：转载

供稿：网友

基本概念
1.行高、行距
行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。看张“盗图”（选自下面的参考文章），其实我也修改了一下啦~
201666110532902.png (739×350)

注意：倒数第二根是基线哦，最下面那根是底线，不是基线。
图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

复制代码

代码如下:半行距 = （line-height - font-size）/2

当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：
201666110634938.png (340×87)

2.四种box
要说的4种盒子分别是inline box、line box、content area、containing box ~
1.inline box (行内框)：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。
2.line box （行框）：行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。当有多行内容时，每一行都有自己的行框。
3.content area （内容区）：内容区是围绕着文字的一种box，无法显示出来，其高度取决于font-size和padding。个人觉得：内容区的高度 = font-size + padding-top + padding-bottom，有待查证，也期待小伙伴们给出答案~
4.containing box containing box：是包裹着上述三种box的box，有点绕哈~看图
201666110708000.png (530×174)