CSS深入理解之line-height

发表于 分类于 ， 阅读次数：

line-height的定义

行高，两行文字基线之间的距离
注：不同字体的基线位置不同

行内框盒子模型

  1. 内容区域（content area）
  2. 内联盒子（inline boxes）
  3. 行框盒子（line boxes）
  4. 包含盒子（containing box）

line-height与内联元素的高度机理

内联元素的高度由line-height决定。
行高由于其继承性，影响无处不在，即使单行文本也不例外
高度的表现不是行高，而是内容区域和行间距
内容区域高度 + 行间距 = 行高
内容区域高度只与字号以及字体有关，与line-height没有任何关系
在simsun字体下，内容区域高度等于文字大小值 —— font-size + 行间距 = line-height

line-height各类属性值

normal：默认属性值。与元素字体关联，且不同浏览器有不同变现。
number：使用数值作为行高值。font-size * number
length：使用具体长度值作为行高值。
percent：使用百分比值作为行高值。相对于设置了该line-height属性的元素的font-size大小计算
inherit：行高继承。
注1：lint-height：1.5、line-height：150%、line-height：1.5em区别：
lint-height：1.5——所有可继承元素根据font-size重计算行高
line-height：150%/1.5em——当前元素根据font-size计算行高，继承给下面的元素
注2：body全局数值行高使用经验：
匹配20px的使用经验——方便心算

1
body { font-size : 14px ; line-height : 1.4286;}

line-height与图片的表现

行高不会影响图片实际占据的高度
如何消除图片底部间隙：

  1. 图片块状化——无基线对齐：
    1
    img { display: block; }
  2. 图片底线对齐：
    1
    img { vertical-align: bottom; }
  3. 行高足够小——基线位置上移：
    1
    .box { line-height: 0; }

line-height的实际应用

实现大小不固定的图片、多行文字垂直居中
代替height，避免IE6/7下的haslayout