line-height在CSS属性设置用于行的空间量,例如文本。在未替换的行内元素上,它指定用于计算线框高度的高度。
line-height属性指定便宜美国vps下面的值之一:
数字长度百分比关键词 normal
值的解释:
【normal】
取决于用户代理。桌面浏览器(包括火狐)使用大约1.2的默认值,具体随元素的font-family而定。不同浏览器的默认行高可能存在差异。
【数字(无单位)】
line-height使用的值是这个数字乘以元素自己字体大小。计算值与指定的数字相同。在大多数情况下,这是设置行高并避免由于继承导致意外结果的首选方法。
【长度】
指定的长度用于计算行框高度。使用em为单位给出的值可能会产生意外结果(参见下面的示例)。
【百分比】
相对于元素本身字体的大小。计算出的值。
优选无单位数字设置行高值
这个例子展示了为什么使用数字值更好,而不是长度值。我们使用两个div元素。第一个div设置绿色边框,使用一个无单位的line-height值。第二个div设置红色边框,使用em定义的line-height值。
CSS样式
.green { line-height: 1.1; border: solid limegreen;}.red { line-height: 1.1em; border: solid red;}h1 { font-size: 30px;}.box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px;}
HTML代码
<div class=”box green”> <h1>Avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior …</div><div class=”box red”> <h1>Avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior …</div><!– The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px –> <!– The second <h1> line-height results from the red div’s font-size (15px × 1.1) = 16.5px, probably not what you want –>
?第一个h1元素的line-height根据它自身的字体大小计算((30px × 1.1) = 33px ? )
第二个h1元素的line-height的记过是根据红色div的字体大小计算((15px × 1.1) = 16.5px),这很可能不是你所想要的。
?
77847532