行高line-height小结
5种方式定义行高
normal
约为1.2,所有继承下来的子元素会基于本身的font-size计算出自己的行高值,会随着font-size相应缩放,浏览器在解释normal时会有细徽差异
inherit
继承父容器的行高
百分比
父容器的字体大小乘以该数=继承的行高,所有继承下来的子元素会忽略本身的font-size而使用通过计算继承而来的行高。不会相应缩放
值(有单位)
直接继承,所有继承下来的子元素会忽略本身的font-size,同样不会相应地缩放
系数(无单位)
所有继承下来的子元素会基于本身的font-size计算出自己的行高值,会随着font-size相应缩放,最理想的方法
行间距的计算:行高-字体大小
当行高小于字体大小时,会优先行高,content area会溢出,半行高会折叠以保证inline box的原高度,如下图
上标和下标会影响line box使其高度异常,可以对其设line-height:0,去除该元素的上下半行间距,
IE5/6里的BUG:移除了内联图片的顶部半行间距,解决这个问题可以给图片设置顶部的margin值,需应用条件注释等针对IE5/6