line-hight-(行高)解析

行高定义：line-height属性是指文本行基线之间的距离。

顶线、中线、基线、底线概念

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

行高就是上图中两条红线间的距离

em框、内容区、行内框、行框

em框：em框在字体中定义，也称为字符框（charater box）,有font-size定义

内容区：底线和顶线包裹的区域，即由元素中各字符的em框串起来构成的框。

行内框（inline box），这个框通过向内容区增加行间距来描述。对于非替换元素
，元素行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度。因为行间距不应用到替换元素。

行框（line box），这是包含该行中出现的行内框的最高点和最低点的最小框。

div文字垂直居中(多行)

    <div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
            <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
                    This is a test.
            </span>
        </div>

效果图

元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。

<div style="border:dashed 1px #0e0;margin-bottom:30px;">
            <span style="font-size:14px;background-color:#999;">This is a test</span>
        </div>
        <div style="border:dashed 1px #0e0;">
            <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
        </div>

行高的继承

如果父元素的line-height有单位（px、%，em）,那么继承的值则是换算后的一个具体的px级别的值,值是根据父元素的font-size值计算。

如果父元素的属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时子元素的line-height会根据本身的font-size值重新计算得到新的line-height 值。

转载于:https://www.cnblogs.com/liugblog/p/4946338.html