line-height属性技巧

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这个系数传递继承给子元素，而后子元素再按照该系数计算自己对应的像素值。