line-height

div 到底是谁撑起来的？

字体？行高？

<style>
        .box {
            font-size:0;
            line-height: 32px;
            border:1px solid red;
        }
        .box1 {
            font-size:32px;
            line-height: 0;
            border:1px solid red;
        }
</style>

<body>
    <div class="box"> i am a dog</div>
    <br>
    <div class="box1"> i am a dog</div>
</body>

显示如图：

ceshi

由此可见行高决定了div的高度

行距？字的间距？

印刷排版间距每行字体距离，css中则是在文字上下各一半.那么line-height 设置的是什么？
- line-height设置的是文字高度，行距包含在其中，那么行距如何计算呢？
- 行距 = line-height - font-size ，半行距就是 (line-height - font-size) / 2
- 小数值上边距向下取整，下边距向上取整.

作用？ “垂直居中” ？

line-height 对可替换行内元素（如button、input）不起作用，对非替换行内元素可视高度由line-height 来撑起，对块级元素没有作用（变化是因为改变了块级元素里的行内元素实现的）
垂直居中需不需要设置行高和“高度”一样？
- 上面有关于字体大小，行距和行高的计算，可知当行高（line-height）和字体大小一样时 "行字间距" 为 0，如果为2 则字间距是两行每行的半字距加在一起就是一个字体的高度（如：字体大小为14px，行高为28px,则半行距是 (28 -14) /2 = 7px 两行之间则是14px。那么单行原理也是如此，和高度无关，直接设置行高即可！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .box {
    border:1px solid red;
    font-size:14px;
    line-height:28px;
  }
    .box span {
      background-color:#888;
    }
  </style>
</head>
<body>
<div class="box">
  <span>枯藤老树昏鸦，小桥流水人家</span><span>古道西风瘦马，夕阳西下，断肠人在天涯。</span>
</div>
</body>
</html>