行高(line-height)总结

前言：

   1、行元素设置 width、height、 padding-top、 padding-bottom、margin-top、margin-bottom 无效。即不会影响行高。

 padding-top、 padding-bottom会导致行元素内容区变大。

   2、inline-block :对象呈现为行对象显示，行内容呈现为块对象显示。

概念

    行高为相邻两行的基线间的距离。

 

要点

 1、元素设置了行高（无论是块元素还是行元素），将影响块元素内有换行元素或换行内容间的距离，比如块元素，行元素后有换行标签，行内容后面有换行标签。

 2、行高可以被继承。当子元素设置了行高并标记为块元素时将覆盖父元素的行高。属性值为百分比时不会继承百分比值，而是继承计算后的值。

 3、内容区行高与字体尺寸有关。

 

利用行高 设置内容垂直居中的示例，注：内容区域不会垂直居中

 

  多行垂直居中

<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>

单行垂直居中示例

<div style="line-height:100px;border:dashed 1px black;">
      This is a test.
</div>