关于line-height

line-height不允许负值，给定值之后会根据font-size计算行高，line-height指定的行高是行高最小值，设置height可以增大行高

line-height的计算：以px为例，line-height减font-size再除以二，即为font的上下间距

normal的情况为默认值，浏览器会计算出“合适”的行高，与设置的字体有关。多数浏览器（Georgia字体下）取值为1.14，即为font-size的1.14倍，如果未设定font-size，那既是基准值16px的1.14倍
单独讨论这个取值是没什么意义的，因为normal和具体的数值相比，会因为字体的不同而不同
如果是项目需要，还是给定一个值好一些

下例代码中，如果不设置line-height:1的话，则normal/默认的行高显示为22*1.14px=25px;

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <style type="text/css">
        p{
            margin:0;font-size:22px;
        }
        p.small{
            line-height: 0.5
        }
        p.big{
            line-height: 2
        }
        /*p.normal{
            line-height: 1
        }*/
    </style>
</head>
<body>
    <p class="normal">
        这是拥有标准行高的段落。
        默认行高大约是 1。
        这是拥有标准行高的段落。
    </p>

    <p class="small">
        这个段落拥有更小的行高。
        这个段落拥有更小的行高。
        这个段落拥有更小的行高。
    </p>

    <p class="big">
        这个段落拥有更大的行高。
        这个段落拥有更大的行高。
    </p>
</body>
</html>

那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>

实例：body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}

----------------------------------------------------------------------------

如果设为normal或者不设的话，即为默认的方式：根据自身的font-size*1.12

关于继承，可以发现，12*120%=14.4px，这个计算出来的值会被层叠下去的元素所继承，

行内元素如span没有行高（line-height）

<html>
<head>
    <style type="text/css">
        body{font-size:12px;line-height:120%;font-family: Georgia;margin:0;}
        span{font-size: 16px;}
        h1{font-size: 32px;margin:0;}
        #footer{font-size: 16px;margin:0;}
    </style>
</head>
<body>
    <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- body的字体大小12*120%=14x -->
    <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
    <p id="footer">cccccccccccccccccccc</p><!-- body的字体大小12*120%=14x -->
</body>
</html>

而设置120%和1.2效果是不一样的！！

<html>
<head>
    <style type="text/css">
        body{font-size:12px;line-height:1.2;font-family: Georgia;margin:0;}
        span{font-size: 16px;}
        h1{font-size: 32px;margin:0;}
        #footer{font-size: 16px;margin:0;}
    </style>
</head>
<body>
    <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 32*1.2=38px -->
    <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
    <p id="footer">cccccccccccccccccccc</p><!-- 16*1.2=19px -->
</body>
</html>

而在body中设置了line-height为px值的话，

<html>
<head>
    <style type="text/css">
        body{font-size:12px;line-height:22px;font-family: Georgia;margin:0;}
        span{font-size: 16px;}
        h1{font-size: 32px;margin:0;}
        #footer{font-size: 16px;margin:0;}
    </style>
</head>
<body>
    <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 22px -->
    <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*normal比例(跟字体有关)=19px -->
    <p id="footer">cccccccccccccccccccc</p><!-- 22px -->
</body>
</html>

一般来说，设置行高为值：纯数字是最理想的方式。因为其会随着对应的font-size而放缩

在多种情况下，很难确定一个完美的line-height，但无论如何，保守估计标题是没有段落那么的需要自适应line-height

举例来说，所有内容被定义为1.5，标题被定义为1.2.

body {line-height:1.5} h1,h2,h3,h4,h5,h6 {line-height:1.2}

万维网内容可存取性指南（WCAG）2.0规定“段落中的行距至少要1.5倍”，这意味着如果要达到AAA等级，行高应为1.5.