line-height
,font-size
均是css
格式中很常设置的样式,这两个样式会对元素产生什么影响呢?从样式的名字来看,分别代表行高和字体大小的意思,那么line-height
真的等于行高吗?font-size
又是否和行高有关系呢?
基本定义
首先来看一些术语的基本定义
line-height
:line-height
属性是指文本行基线之间的距离,而不是字体的大小- 内容区:非替换行内元素中,内容区就是由元素中字符描述的框。替换元素中,内容区的高度是元素的固有高度加上内外边距和边框值。
- 行间距:行间距是值
line-height
和font-size
值之差。这个差会分为两半,分别应用于内容区的的顶部和底部,行间距只应用于非替换元素。 - 行内框:行内框通过向内容区增加行间距来描述,对于非替换行内元素,行内框的高度刚好等于
line-height
的值,对于替换元素,元素行内框的高度恰好等于内容区的刚度,因为行间距不应用到替换元素。
行的组成
每一行都有一个隐藏的行框,行框的高度由行内框决定,每行的行框是包含该行中出现的行内框的最高点和最低点的最小的框,而行内框可能和font-size
,line-height
等多种元素有关,并且依据元素类型的不同,这两个样式会有不同的表现。
font-size
和行内框
关于font-size
的基本要点如下:
- 应用范围:所有元素
- 继承性: 有
- 意义: 确定字体的大小
font-size
能够确定字体的 大小,可以应用于所有元素,并且具有继承性,当font-size
应用于不同类型的元素时,意义也不尽相同。
font-size
应用于行内非替换元素时
行内非替换元素一般是文本的容器,这里叫做文本元素(如span
,strong
等元素),即font-size
应用于文本元素时,元素的内容区即时font-size
值,而我们知道,在没有任何其他因素的影响时,行内元素的内容区的高度行内框的高度,所以,又可以说font-size
指示了没有设置line-height
时,设置字体时基线间的距离(注意是设置字体元素时)font-size
应用于替换元素
font-size
应用于替换元素等,不会有任何影响,替换元素的高度等于自身的高度,不受font-size
的影响。font-size
应用于块级元素font-size
并不会直接作用于块级元素,但也是有影响的,这要看块级元素的子元素是什么,因为font-size
是有继承性的,当块级元素内直接包含文本时,该文本的大小会是块级元素所指定的font-size
值;当块级元素包含的子元素为行内非替换元素时,该元素继承父元素的font-size
值后,会应用于其内容中的文本,对其进行字体大小的设置;当块级元素包含的子元素为行内替换元素时,该元素虽然继承父元素的font-size
值,但并不会收到任何影响。
综上,不管是自身设置的,还是继承得来的font-size
值,都只会对包含的文本内容产生影响。
line-height
和行内框
关于line-height
的基本要点如下:
- 应用范围:所有元素
- 继承性: 有
- 意义: 确定字体的大小
和font-size
一样,应用于不同类型的元素时,line-height
有不同的表现。
line-heigh
t应用于行内非替换元素时
应用于非替换元素时,line-height
属性是指文本行基线之间的距离,行内框的高度此时等于line-height
,可能低于font-size
值,也可能高于font-size值,这是因为首先行内框的基础高度是内容框的高度,即font-size,但是当设置了line-height时,等于在内容框的基础上加上了行间距(line-height-font-size的值),行间距或正或负,分成两半分别应用于内容框上下,所以行内框的高度,也就是基线之间的距离可能大于内容框的高度,也可能小于内容框的高度,取决于line-height的值。line-height
应用于替换元素时
line-height
应用于替换元素时,不会对替换元素的高度产生影响,替换元素的高度还是本身的高度,但是当替换元素的vertical-align
是一个百分数时,替换元素的line-height
值则有了用武之地。我们,当为vertical-align
设置为百分数时,会把元素的基线相对于父元素的基线升高或降低指定的量(即该元素line-height
值得指定百分比数),而当元素是替换元素时,则是把替换元素的底边相对于父元素的基线进行调整。line-height
应用于块级元素时
同font-size
一样,当line-height
应用于块级元素时,并不会直接对块级元素产生影响,而是会将line-height
值应用于其中的文本,设置文本的行高,或者继承给其子元素(子元素可能是块级元素、行内非替换元素或替换原素)
可以说,假如一个元素时块级元素,即时设置了line-height
值,那么其中文本基线间的距离也不一定是line-height
,因为块级元素中不单只可能有文本,或行内非替换元素,还能能有行内替换元素,而行内替换元素的高度是不受line-height
所控制的,所以说在应用于块级元素时,line-height
值定义了文本基线之间的最小距离。