前言:
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>