你的位置:首页 > 网页设计

[网页设计]CSS line


一、line-height的定义

line-height,行高,是指文本行基线间的垂直距离。

1.    什么是基线?

一般而言,一个文本行一共有四条线,从上到下依次为顶线、中线、基线、底线;在英文中,基线为小写 x 字母下边缘所在的那条线。如图:

注意,基线的位置与字体有关,不同的字体基线的位置有偏差。

2.    既然行高是指基线间的垂直距离,那么单行文本有没有行高?

当然是有的!

 

3.    行高控制行间距。

在多行文本中,第一行文本根据文本的字体和字号显示,并因此确定了第一行的基线;在此基础上,根据line-height的值,确定第二行基线的所在位置,在那个位置之上显示第二行文本。

在这个机制之下,可以推断出line-height控制行间距,行间距是文本行之间超出字体大小的额外空间。换句话说,line-height与font-size之差就是行间距;如果line-height的值小于font-size,也就是说行间距为负,就会导致后一行文本与前一行文本重叠。

 

二、行内框与行框

1.内容区:顶线与底线包围的区域,其高度与font-size相关(甚至可以粗略地等于)。

2.行内框:

每个行内元素都会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影响的时候(比如line-height),行内框等于内容区。

设定line-height之后,将半行距【(行高-字体大小)/2】分别增加或者减少到内容区的上下两边,得到一个行内框。

3.行框:一旦给定的某一行已经生成了所有的行内框,行框的构造就会考虑这些行内框,使行框的高度足以包含最高行内框的顶端和最低行内框的底端。

请看如下代码:

 1 <style> 2 p { 3   font-size: 32px; 4   border: 1px solid red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>What kind of color this para will be?</p>10 </body>

为了页面效果比较明显,所以将font-size设置为32px;如下图:

这是line-height为默认值normal的页面效果。

如果我们改变line-height的值,比如将line-height的值设为0,其页面效果为:

border为什么会变成这样?

这是因为,font-size为32px,内容区的高度也就是32px;而line-height为0,那么半行距就是-16px;将-16px分别加到内容区的上下部分,刚好抵消了所有内容区的高度,从而行内框的高度变成0;这一行中只有这一个行内框,行框的高度也相应为0,于是就有了这样的一个边框。