深入理解line-height、font-size、vertical-align_html/css_WEB-ITnose

目录 [1]行高 [2]字体大小 [3]垂直对齐

前面的话

　　line-height、font-size、vertical-align这三个属性可谓是相互依赖的关系，改变行间距离、设置垂直对齐等都需要这三个属性的通力合作。本文涉及到的一些术语详细解释请参考块级元素基本术语和行内元素基本术语

 

line-height

定义

　　line-height行高是指文本行基线之间的距离。在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离；在应用到行内元素时，line-height定义了元素行内框的高度

　　值: | | | normal | inherit

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

　　百分数: 相对于元素的字体大小font-size

作用

　　行高line-height会显著影响行内元素如何显示。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度

 

font-size

　　font-size字体大小设置的是字体中字符em框的高度，实际的字符字形通常比字符em框要矮

　　值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | | | inherit

　　初始值: medium

　　应用于: 所有元素

　　继承性: 有

　　百分数: 相对于父元素的字体大小font-size

 

vertical-align

　　vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高

　　值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit

　　初始值: baseline

　　应用于: 行内元素、替换元素、表单元格

　　继承性: 无

　　百分数: 相对于元素的行高line-height

　　[注意]vertical-align不影响块级元素中内容的对齐

vertical-align:baseline(元素的基线与父元素的基线对齐)vertical-align:sub(降低元素的基线到父元素合适的下标位置)vertical-align:super(升高元素的基线到父元素合适的上标位置)vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)vertical-align:inherit(从父元素继承vertical-align属性的值)

inline-block底部空隙

　　inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙

　　于是，解决这个问题有以下几个解决办法

　　[1]display:block

　　因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效

　　[2]父级的line-height: 0

　　这样使匿名文本与行框的距离为0

　　[3]vertical-align: top/middle/bottom