关于line-height的特性研究

来源：互联网发布：易语言数组对比编辑：程序博客网时间：2024/06/03 17:30

对于样式表中的line-height属性究竟会对元素产生什么样的影响,是一个比较重要的问题,往往有我们使用了此属性达到的一些效果,但它是通过怎么的原理达到此效果总是比较模糊,line-height它本来的意思行高,但是设置元素高度可以使用height,为什么什么还需要专门用一个line-height呢?这里为了弄清这个问题,以这里专门对它使用后元素的效果做个测试,看看它究竟是怎么影响元素的,测试的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>测试line-height</title></head><body><label style="line-height:60px;display:inline;border:1px solid red">label行内</label><label style="line-height:60px;display:inline-block;border:1px solid red">label行内块</label><label style="line-height:60px;display:block;border:1px solid red">label块</label><span style="line-height:60px;display:inline;border:1px solid red">span行内</span><span style="line-height:60px;display:inline-block;border:1px solid red">span行内块</span><span style="line-height:60px;display:block;border:1px solid red">span块</span><p style="line-height:60px;display:inline;border:1px solid blue;">p行内不设置高度</p>行内参照<p style="line-height:60px;display:block;border:1px solid blue;">p块不设置高度</p><p style="line-height:60px;height:30px;display:inline;border:1px solid blue;">p行内设置0.5倍高度</p>行内参照<p style="line-height:60px;height:30px;display:block;border:1px solid blue;">p块设置0.5倍高度</p><p style="line-height:60px;height:90px;display:inline;border:1px solid blue;">p行内设置1.5倍高度</p>行内参照<p style="line-height:60px;height:90px;display:block;border:1px solid blue;">p块设置1.5倍度高度</p><div style="line-height:60px;display:inline;border:1px solid red">div行内</div><div style="line-height:60px;display:block;border:1px solid red">div块</div><input style="line-height:60px;display:inline;border:1px solid red" value="input行内" /><input style="line-height:60px;display:block;border:1px solid red" value="input块"/><input style="line-height:60px;display:inline;border:1px solid red;height: 60px;" value="input行内并设置行高相等" /><input style="line-height:60px;display:block;border:1px solid red;height: 60px;" value="input块并设置行高相等"/></body></html>

最后测试的结果如下图所示:

通过测试结果基本可以确定line-height它应该表表一行文字所占据的从上到下的距离,但它对于表单型控件等是不适用的,如果需要对控件设置高度最好用padding而不是height与line-height这两个个属性在不同的浏览器上表现不一样;对line-height对于那非控件类的元素如:span,label,p,div等都是如此,尤其是将它们都设置为块元素时表现是最为一致的,所有块元素如果不设置高度基本line-height的值就是height的值,当height设置较小时,文字展示的位置不变只是边界变了,此时就有可能使用文字超出边界,当高度设置较大时,文字所在的位置还是不变只是下面多出了空白;

对行内元素不同的浏览器表现会有一些不一致,例如在IE中支持一个所谓的inline-block可以使一个非块元素在一个行上具有line-height的特性,但是其它浏览器并不支持此属性,从面的结果可以看出对于一个行内元素设置line-height没有效果,但是如果将这个行内元素进行浮动处理此时的line-height的作用又会显示出来.