对于样式表中的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的作用又会显示出来.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
