line-height属性技巧

来源:互联网 发布:windows 输出到文件 编辑:程序博客网 时间:2024/05/16 05:17

line-height属性技巧

使只含一行内容的段落的文字内容水平居中

line-height是一种文本属性,指示行高,浏览器默认的行高较小,通常使段落文字显得比较密集,增加行高可以使段落看上去更加舒服。行高可以以像素作为单位,如(px,em),也可以以百分比作为单位,如下设置行高为基准值的1.5倍

p{  line-height:150%}

除了疏松文字在高度之间的距离的用途外,行高还可以附带的实现垂直居中文字的作用,如:

p{  height:50px;  line-height:50px;}

如上所示,在块级元素中只要将行高即line-height属性值,设置为等于height即高度值即可居中块级元素内的文字,前提是改块级元素的内容只有一行,否则行高等于高度也不现实,所以应用于h1,h2等标题类元素比较多。

另一个居中文字(内联元素)的属性是 text:align?

百分比与小数点(系数)的差别

将line-height设置为150%或1.5有什么差别吗?
其实,两者的差别在于属性的继承性,使用百分比时,会首先计算父元素的line-height值,直接将这一像素值传递继承给子元素,而使用无单位的1.5时,则会直接将1.5这个系数传递继承给子元素,而后子元素再按照该系数计算自己对应的像素值。

原创粉丝点击