line-height全攻略

原文：line-height
译文：line-height全攻略
  今天的此篇实际上是应邀之作，一个读者联系我建议写一篇关于line-height这个css属性的文章，以下下就是拙作。

 line-height究竟是什么？

       这看起来是一个很基本的问题。每个人都知道line height的含义，不是吗？这是一行的高度。
       根据定义，行高是两行相邻文本相应位置的垂直距离。一个合适的参考位置是基线(baseline)，这是一条大写字母和大多数小写字母所stand upon的一条假想线。
       我不是印刷方面的专家，但是我发现这非常有趣，如果我确实遗漏了什么，请通过这个方式让我知道.
       在过去，印刷品是通过可以自由组合的铅字进行排版，我们现在不是在谈论中世纪；我记得这是通过在70年代中期学校组织到当地的一家报社参观而得知的。
       当他们想增加一行一行文字之间的空白的时候，他们就插入铅条。因此这个距离被称作行距，或者叫做半行距因为铅条在两个方向上增加相同的空间。这个称呼一直延续到我们这个计算机时代。

line-height的影响面

       行距对文字的可读性影响很大。太小的行距使文字太过于紧凑，然而太多的行距使读者在行之间失去关注点。
       没有一个总是最优化的行距。合适的行距取决于行的宽度：大多数人知道合适行宽度是重要性，同时这是一个导致一个没有经验的网页设计师在一个流式布局之前选 择固定宽度的决定性因素。不是每一个人都理解行距应该取决于行宽度，因此，行越长，需要更多的行距，这样眼睛能发现第二行的起始位置。
       文字的对齐方式同样参与其中。左对齐的文字不需要任何反常的行距，但是两端对齐的文字需要更多的行之间更多的空白，这对于阅读障碍者尤为重要，因为两端对 齐的文字在段落之间更容易产生空白，右对齐的文本可能需要更多的行距，因为我们不习惯阅读这种方式排版形的文字。
       如果我们使用经验法则：行的宽度不应该超过70字符（包括空白和标点），同时如果文字是左对齐的那么可读性最优的行距是1.5,当然,这也取决于我们使用文字的字体。

我们如何设置行高

     在css中，我们使用line-height属性，我们能以五种方式书写该样式：
        1.使用normal 关键字
        2.作为一个带有单位的长度
        3.作为一个数字系数
        4.作为一个百分比
        5.有一个inherit的关键字
      关键字很普通，normal设置browser认为应该是个通常的行高;通常是字体的1.2倍.inherit意味着元素从他的父元素那里继承经过计算的行高结果值。
      长度，当然指一个数字之后跟着一个单位。这个单位可以是固定的（比如像素，毫米，点数）或者是相对的比如（em,ex）.在web中领域中， 最好使用相对的单位，因为固定的行高很容易引起混乱如果读者改变文字的尺寸。注意如果我们为子元素设置line-height:inherit那么这是继 承而来的计算值。如果我们设置行高为1.5em。这个值是基于这个元素的字号进行计算的。如果子元素有更大的字号或者更小的字号，可能结果不是我们预期 的。
      一个数字系数就是一个没有单位的数字。这时候元素使用的行高是该元素的字号与这个系数的乘积。在继承的情况下,这是实际继承系数。所以。line-height:2是使行有了两倍的间距。即使是子类元素也如此，而不管子类元素的字号是否比父类大或者是小。
      百分比和系数类似是和字号和百分比的乘积，但是被继承的是计算值而不是百分比。
      无论我们选择哪种方式，负值是不被允许的，如果你思考一下这是很明显的事情。
      设置行高为1,1em或者100%我们密集排列的文字，这时候下层的小写字符碰到下一行上行的文字。小于1的行高有时候用于多行标题，但是这是不被推荐的除非你对排版很熟。

其他的问题

       可能你会猜想，这是行距的问题，是的，有一些事情我们需要密切关注。一是继承的效果，上面我已经总结过，如果一个子元素的字号和父元素不同，指定父元素的行高特别重要，一个数字因素在继承的情况下也是这样的，然后对于百分比和长度继承的是计算之后的值。
       有时候 我们试图把两个块级元素尽可能的挤在一起，但是即使设置margin和padding值为0,两个元素见还是有一些空间，这个罪魁祸首就是line- height。多于空白在文字的两侧平分：一半在上一半在下。如果行高是1.5.将会有1/4的间隙出现在上下。
       第三个通常的问题和行高没有多大的关系，但是他能通过改变行高得到修复。使用table进行布局的时候通常希望table单元格包含经过 photoshop切片的图片。当我们考虑到web的标准 ，同时在文档中插入一个严格的申明。有趣的事情发生在支持现代标准的浏览器中：垂直方向上的空白出现在图片之间。
      原因出在图片上－img的元素类型是内联的元素。他们因此会受到vertical-align属性的影响，这个值的缺省值是baseline.换句话说， 一个图片这样定位 他的底边和baseline靠齐。但是baseline和单元格的底边有一定的间隙。这是为个给下行字符腾出一点空间。这就是我们看到的单元格和 baseline之间的空白，加上一半的多余的行高，如果这个图片比行高要小，会有一些空白在图片之上，这来自与另一半的多于行高。
      最通常 的解决方式就是设置设置img元素的display属性为"block"。但是一个可选的方式是设置行高为0。
很酷的技巧
      行高属性可能不是在css中最令人兴奋的属性。他不像positon或者float属性那样能做令人振奋的事情。比如，他对于排版和可读性都很重要，
      它可能被用来在一块区域中使一行文字居中，试想，如果你要确保行不被覆盖，你能通过简单的设置行高和该区域的高度相同。因为空白被平分给两边，文字将垂直居中。